/includes/app-service-mobile-html-js-auth-library.md

https://gitlab.com/yeah568/azure-content · Markdown · 87 lines · 69 code · 18 blank · 0 comment · 0 complexity · ecfd2aadb3018daab59e4fbf8d934a96 MD5 · raw file

  1. ###<a name="server-auth"></a>How to: Authenticate with a Provider (Server Flow)
  2. To have Mobile Services manage the authentication process in your app, you must register your app with your identity
  3. provider. Then in your Azure App Service, you need to configure the application ID and secret provided by your provider.
  4. For more information, see the tutorial [Add authentication to your app].
  5. Once you have registered your identity provider, simply call the .login() method with the name of your provider. For
  6. example, to login with Facebook use the following code.
  7. ```
  8. client.login("facebook").done(function (results) {
  9. alert("You are now logged in as: " + results.userId);
  10. }, function (err) {
  11. alert("Error: " + err);
  12. });
  13. ```
  14. If you are using an identity provider other than Facebook, change the value passed to the login method above to one of
  15. the following: `microsoftaccount`, `facebook`, `twitter`, `google`, or `aad`.
  16. In this case, Azure App Service manages the OAuth 2.0 authentication flow by displaying the login page of the selected
  17. provider and generating a App Service authentication token after successful login with the identity provider. The login
  18. function, when complete, returns a JSON object (user) that exposes both the user ID and App Service authentication token
  19. in the userId and authenticationToken fields, respectively. This token can be cached and re-used until it expires.
  20. ###<a name="client-auth"></a>How to: Authenticate with a Provider (Client Flow)
  21. Your app can also independently contact the identity provider and then provide the returned token to your App Service for
  22. authentication. This client flow enables you to provide a single sign-in experience for users or to retrieve additional
  23. user data from the identity provider.
  24. #### Social Authentication basic example
  25. This example uses Facebook client SDK for authentication:
  26. ```
  27. client.login(
  28. "facebook",
  29. {"access_token": token})
  30. .done(function (results) {
  31. alert("You are now logged in as: " + results.userId);
  32. }, function (err) {
  33. alert("Error: " + err);
  34. });
  35. ```
  36. This example assumes that the token provided by the respective provider SDK is stored in the token variable.
  37. #### Microsoft Account example
  38. The following example uses the Live SDK, which supports single-sign-on for Windows Store apps by using Microsoft Account:
  39. ```
  40. WL.login({ scope: "wl.basic"}).then(function (result) {
  41. client.login(
  42. "microsoftaccount",
  43. {"authenticationToken": result.session.authentication_token})
  44. .done(function(results){
  45. alert("You are now logged in as: " + results.userId);
  46. },
  47. function(error){
  48. alert("Error: " + err);
  49. });
  50. });
  51. ```
  52. This example gets a token from Live Connect, which is supplied to your App Service by calling the login function.
  53. ###<a name="auth-getinfo"></a>How to: Obtain information about the authenticated user
  54. The authentication information for the current user can be retrieved from the `/.auth/me` endpoint using any
  55. AJAX method. Ensure you set the `X-ZUMO-AUTH` header to your authentication token. The authentication token
  56. is stored in `client.currentUser.mobileServiceAuthenticationToken`. For example, to use the fetch API:
  57. ```
  58. var url = client.applicationUrl + '/.auth/me';
  59. var headers = new Headers();
  60. headers.append('X-ZUMO-AUTH', client.currentUser.mobileServiceAuthenticationToken);
  61. fetch(url, { headers: headers })
  62. .then(function (data) {
  63. return data.json()
  64. }).then(function (user) {
  65. // The user object contains the claims for the authenticated user
  66. });
  67. ```
  68. Fetch is available as an npm package or for browser download from CDNJS. You could also use
  69. jQuery or another AJAX API to fetch the information. Data will be received as a JSON object.