Skip to content

windows-uwp-javascript.md

Latest commit

 

History

History
123 lines (90 loc) · 4.81 KB

windows-uwp-javascript.md

File metadata and controls

123 lines (90 loc) · 4.81 KB
title Auth0 Windows Universal App Javascript SDK Tutorial
description This tutorial will show you how to use the Auth0 Windows Universal App Javascript SDK to add authentication and authorization to your app.
name Windows UWP (JS)
hybrid false
alias
windows-10
windows-tablet
surface
language
Javascript
image /media/platforms/windows-8.png
tags
quickstart
snippets
dependencies setup use
native-platforms/windows-uwp-javascript/dependencies
native-platforms/windows-uwp-javascript/setup
native-platforms/windows-uwp-javascript/use
seo_alias windows-uwp-javascript

Windows UWP App in Javascript Tutorial

This tutorial explains how to integrate Auth0 with a Windows UWP application written in JavaScript. Auth0.Windows.UWP.JavaScript helps you authenticate users with any Auth0 supported identity provider.

Tutorial

1. Install Auth0.Windows.UWP.JavaScript NuGet package

Use the NuGet Package Manager Console (Tools -> Nuget Package Manager -> Package Manager Console) to install the Auth0.Windows.UWP.JavaScript package, running the command:

${snippet(meta.snippets.dependencies)}

And add reference to the JavaScript code in the default.html, include the following line in the <head> element:

${snippet(meta.snippets.setup)}

2. Setting up the callback URL in Auth0

Go to the Application Settings section on Auth0 Admin app and make sure that App Callbacks URLs has the following value:

https://${account.namespace}/mobile

3. Integration

There are three options to do the integration:

  1. Using the Auth0 Login Widget with the Web Authentication Broker (this is the simplest with only a few lines of code required).
  2. Using the Auth0 Login Widget with the Web Authentication Broker, but specifying a specific Connection.
  3. Custom user interface to ask username and password.

Option 1: Using the Auth0 Login Widget

To start with, we'd recommend using the Login Widget. Here is a snippet of code to copy & paste on your project:

${snippet(meta.snippets.use)}

Option 2: Using the Auth0 Login Widget, but specifying a connection.

If you know which identity provider you want to use, you can add a connection parameter and the user will be sent straight to the specified connection:

auth0.Login({ connection: "auth0waadtests.onmicrosoft.com" }, function (err, result) {
  if (err) return err;
  /*
  Use result to do wonderful things, e.g.:
    - get user email => result.Profile.email
    - get facebook/google/twitter/etc access token => result.Profile.identities[0].access_token
    - get Windows Azure AD groups => result.Profile.groups
    - etc.
  */
});

connection names can be found on Auth0 dashboard. E.g.: facebook, linkedin, somegoogleapps.com, saml-protocol-connection, etc.

Option 3: Custom user interface to ask username and password.

The third option is to create your own custom user interface to prompt the user for their username and password. You can then pass this, along with the connection name to the LoginAsync method:

auth0.Login({
    connection: "my-db-connection",
    username: "username",
    password: "password"
  },
  function (err, result) {
    if (err) return err;
    /*
    Use result to do wonderful things, e.g.:
      - get user email => result.Profile.email
      - get facebook/google/twitter/etc access token => result.Profile.identities[0].access_token
      - get Windows Azure AD groups => result.Profile.groups
      - etc.
    */
  });

Scope

Optionally you can specify the scope parameter. There are two possible values for scope today:

  • scope: "openid" (default) - It will return, not only the access_token, but also an id_token which is a Json Web Token (JWT). The JWT will only contain the user id.
  • scope: "openid {attr1} {attr2} {attrN}" - If you want only specific user's attributes to be part of the id_token (For example: __scope: "openid name email picture").

You can get more information about this in the Scopes documentation.

Accessing user information

The Auth0User has the following properties:

  • Profile: returns a JSON object containing all available user attributes (e.g.: user.Profile.email).
  • IdToken: is a Json Web Token (JWT) containing all of the user attributes and it is signed with your client secret. This is useful to call your APIs and flow the user identity.
  • Auth0AccessToken: the access_token that can be used to access Auth0's API. You would use this for example to link user accounts.

Congratulations!