Registering Users

Prerequisites

  1. Completion of fabric Identity onboarding (see here for details)

Single Page Application Implmentation

There are four main steps in registering a new customers in a single page application

  1. Starting Authorization Code Flow with PKCE
  2. User choosing / setting credentials (this can be username password or social credentials)
  3. Obtaining access_token for newly created credentails
  4. Creating customer profile

Starting Authorization Flow with PKCE

fabric Identity uses a managed login/signup page where your customers can securely login or sign up to your storefront. This is all performed within one hosted page. To start registering a customer you will be making a request to fabric Identity to authorize a user.

During the onboarding of fabric Identity, you would have recieved a domain and api endpoint where we will be starting the auth flow it will look simlar to this https://{domain}/oauth/{auth_server}/v1/authorize. Also during onboarding you would have provided us with your callback url for fabric identity to redirect to after successful authorization of a user.

Generating Proof Key for Code Exchange

To begin the authorization flow, you'll need to create a pkce code challenge. This can be achieved via a library of your choice in the language you are developing in. Or you can create your own. Here is some psuedo code to assist with creating your own.

code_verifier = randomBytes(length=43) // length to be minimum of 43 and maximum of 128
code_challenge = base64urlEncode(SHA256(ASCII(code_verifier)))

We will then use the code_challenge in the first step to start the authentication flow.

Requesting for Authorization

Assuming you have some login / register button on your storefront: When a user clicks on that button, you'll construct a link and redirect the users browser to the constructed link.

Start with your base fabric Identity endpoint /oauth/{authServer}/v1/authorize

And construct the following parameters as query parameters

{
    "client_id": {your_client_id},
    "response_type": "code",
    "scope": "openid",
    "redirect_uri": {your_oauth_callback_route},
    "state": {random_uuid},
    "code_challenge_method": "S256",
    "code_challenge": {code_challenge_from_previous_step}
}

Once constructed the link, redicect the users browser to this link. The user will then land on your fabric Identity login and registration page.

sign in screen

If the user already has an account they will sign in. Though we are interested in new account setup.

So the user will click on "Sign up" at the bottom of the login screen.

sign up screen

The user will be promted to enter the fields presented. Once entered the user may have to go though email verification if you have decided to set that up duing fabric Identity onbaording.

sign up email verification

The user will now sign in using their credentials they have setup.

Requesting access_token from authorization code

If successful sign in the users browser will be redirected back to your application, with standard oauth query parameters set in the URL.

You need to extract the query parameters from the callback uri.

{
    "code": {the_code_to_be_used_in_next_step},
}

Make a POST request (application/x-www-form-urlencoded) to /oauth/{authServer}/v1/token with the following parameters

{
    "client_id": {your_client_id},
    "code": {code_extracted_from_query_params},
    "grant_type": "authorization_code",
    "redirect_uri": {your_oauth_token_callback_rout},
    "code_verifier" {code_verifier_from_first_step}
}

You'll recieve a response that contains the following

{
  "token_type": "Bearer",
  "expires_in": 3600,
  "access_token": "{access_token}",
  "scope": "openid",
  "id_token": "{open_id_token}"
}

Completion

Through this guide you have learnt the flow of registering users. During this flow of registering a user a User record in fabric Customer will be created with the ID of the user.

Read more in the following guide creating customer profiles.