title: Registering Web API 2 external logins from multiple API clients with OWIN Identity
body: <p>I would like the following architecture (I've made up the product name for this example):</p>
  
  <p><strong>Web API 2 application running on one server</strong>
  <a href="http://api.prettypictures.com" rel="noreferrer">http://api.prettypictures.com</a></p>
  
  <p><strong>MVC 5 client app running on another server</strong>
  <a href="http://www.webpics.com" rel="noreferrer">http://www.webpics.com</a></p>
  
  <p>I would like <strong>www.webpics.com</strong> client app to use the Pretty Pictures API to:</p>
  
  <ul>
  <li>Register new accounts with username and password</li>
  <li>Register new accounts with Facebook/Google/Twitter/Microsoft</li>
  <li>Log in</li>
  <li>Retrieve pictures</li>
  </ul>
  
  <p>All of the above works except registering external accounts with Facebook, Google etc.</p>
  
  <p>I cannot work out the correct flow to create an <strong>external</strong> account from a separate client user of the API.</p>
  
  <p>I have studied most documents available on the authentication flow, like this:
  <img src="https://i.stack.imgur.com/fF67o.png" alt="enter image description here"></p>
  
  <p>I have read pretty much everything I can on the new Identity model in OWIN.</p>
  
  <p>I've examined the SPA template in Visual Studio 2013. It demonstrates how to do most of what I need but only when the client and the API are on the same host; if I want multiple clients accessing my API and being able to let users sign up via Google etc. it doesn't work and as far as I can tell the OWIN authentication flow breaks.</p>
  
  <p>Here is the flow so far:</p>
  
  <ul>
  <li>User browses to <strong>www.webpics.com/Login</strong></li>
  <li><strong>www.webpics.com</strong> calls <strong>api.prettypictures.com/Account/ExternalLogins</strong> (with a <strong>returnUrl</strong> set to go back to a callback at <strong>www.webpics.com</strong>) and displays the resulting links to the user</li>
  <li>The user clicks "Google"</li>
  <li>The browser redirects to <strong>api.prettypictures.com/Account/ExternalLogin</strong> with the name of the provider etc.</li>
  <li>The API's <strong>ExternalLogin</strong> action instantiates a challenge to <strong>google.com</strong></li>
  <li>The browser is redirected to <strong>google.com</strong></li>
  <li>The user enters their username and password (if they are not already logged in to <strong>google.com</strong>)</li>
  <li><strong>google.com</strong> now presents the security clearance: <strong>"api.prettypictures.com" would like access to your email address, name, wife, children etc. Is this OK?</strong></li>
  <li>User clicks "Yep" and is taken back to <strong>api.prettypictures.com/Account/ExternalLogin</strong> with a cookie that Google has set.</li>
  </ul>
  
  <p>This is where I've got stuck. What is supposed to happen next is somehow the client app should be notified that the user has successfully authenticated with <strong>google.com</strong> and be given a single use access code to swap for an access token later on. The client app should have the opportunity, if necessary, to prompt the user for a username to associate with their <strong>google.com</strong> login.</p>
  
  <p>I don't know how to facilitate this.</p>
  
  <p>In fact at this point the browser ends up sat at the <strong>api.prettypictures.com/Account/ExternalLogin</strong> endpoint after the callback from Google. The API is signed in for Google but the client doesn't know how to deal with that. Should I pipe that cookie back to <strong>www.webpics.com</strong>?</p>
  
  <p>In the SPA app, it is done via AJAX and <strong>google.com</strong> will return an token as a URL fragment and it all works nicely because it all sits on one domain. But that defies much of the point of having an "API" that multiple clients can fully use.</p>
  
  <p>Help!</p>