Step 7: Call Hosted Login from your site/app (required)

Getting Started GuideTest & Learn
Identity Cloud DocumentationAuthorization Code + PKCE
VideosHosted Login Authorization Requests


Before Continuing

There are many OpenID Connect libraries available for use depending on the platform or programming language of your application. The following examples demonstrate the mechanics of OIDC interactions; however it is recommended that you use a library rather than build from scratch. 

However, if you only want to verify that you can connect to Hosted Login, simply paste your authorization request into your browser’s address bar and then press ENTER. If the Hosted Login sign-in screen appears, you’ve made your connection.


Login/Registration

When an end user clicks a login/registration action element on your site or app (e.g., a Login button), you must make a call to the /login/authorize endpoint to display the Akamai-hosted login page to the user. 

The following implementation assumes you’re using a public OIDC client along with PKCE (Proof Key for Code Exchange). This is the recommendation for all end-user facing applications.


Request Template

https://v1.api.<region>.janrain.com/<customer-id>/login/authorize?
  client_id=<oidc-client-id>
  &redirect_uri=<redirect-uri>
  &scope=<oidc-scopes>
  &response_type=code
  &state=<randomly-generated-state-token>
  &code_challenge=<client-generated-string-hashed-and-encoded>
  &code_challenge_method=<hashing-algorithm>


Example Request

https://v1.api.us.janrain.com/12345678-1234-1234-1234-123456789012/login/authorize?
  client_id=1ab23456-7c8d-90ef-g123-45hij6789012
  &redirect_uri=https://mydomain.com
  &scope=openid profile email phone
  &response_type=code
  &state=3bd5262737237ef4a
  &code_challenge=RTg4QjMyRUJCNzdBRTQ1MkM2NTAzRTVDOEQ5OTg3QjIwMjVBNTcxQTU5RTJFNDYwMzJBQjYxRkM4NjQzdBNw
  &code_challenge_method=S256

Making the /login/authorize call displays the Akamai-hosted login page, where the user can sign in or create an account. For example:

Upon successful sign in or account creation, a redirect URI is returned to the app or browser.


Example Redirect URI

https://v1.api.us.janrain.com/12345678-1234-1234-1234-123456789012/login/code?
  state=security_token%3bd5262737237ef4a
  &%url%https://mydomain.com
  &code=4JR27W91a-ofgCe9ur2m6bTghy77


Exchange Code for Tokens

Send the authorization code (the code from the redirect URI) to the /login/token endpoint, which exchanges that code for an access token, an identity token, and a refresh token.

The following implementation assumes you’re using a public OIDC client along with PKCE (Proof Key for Code Exchange). This is the recommendation for all end-user facing applications.


Request Template

curl -X POST \
  https://v1.api.<region>.janrain.com/<customer-id>/login/token \
  -H 'Content-Type: application/x-www-form-urlencoded' \>
  -d 'grant_type=authorization_code
    &client_id=<oidc-client-id>
    &redirect_uri=<redirect-uri>
    &code=<code-returned-by-authorize-endpoint>
    &code_verifier=<original-client-generated-string>'


Example Request

curl -X POST \
  https://v1.api.us.janrain.com/12345678-1234-1234-1234-123456789012/login/token \
  -H 'Content-Type: application/x-www-form-urlencoded' \
  -d 'grant_type=authorization_code
    &client_id=1ab23456-7c8d-90ef-g123-45hij6789012
    &redirect_uri=https%3A%2F%2Fmydomain.com
    &code=4JR27W91a-ofgCe9ur2m6bTghy77
    &code_verifier=AdleUo9ZVcn0J7HkXOdzeqN6pWrW36K3JgVRwMW8BBQazEPV3kFnHyWIZi2jt'


Example Response

{
  "access_token": "X81Pavwil2IhA75ayAK7XLObKHKVUr7vPbAMtCEnagpY9JLRyMqgd_6hquxjdUZ4",
  "refresh_token": "SY5kZY6HPls2KWDM6jHhzYruQaNSmi_eS00PeftLgtsdHxPMlxsAbJ5WMN1MRGON",
  "expires_in": 3600,
  "token_type": "Bearer",
  "scope": "email openid phone profile",
  "id_token": "eyJhbGciOiJSUzI1NiIsImtpZCI6IjlhYmM1N2ZmNGEwNzllNWY5NGQxZTUzZmRjYzZjZWZmMGNhNTM1Z
TUiLCJ0eXAiOiJKV1QifQ.eyJhdF9oYXNoIjoiY3lXUmxXcGlnT1VoNXJGRm5aY25ydyIsImF1ZCI6WyIzMmU1ZDEzYi0zMj
c3LTRmMDUtYTk3OC1hNmJiNzZlZTM3ZDkiXSwiYXV0aF90aW1lIjoxNTY1NjQ3ODk2LCJleHAiOjE1NjU2NTI1NTUsImdsb2
JhbF9zdWIiOiJjYXB0dXJlLXYxOi8vZGV2LWFwcC5qYW5yYWluY2FwdHVyZS5jb20vNnR1cWFodTlqN2Z1bXlla2ZnOXV4ZH
A1d3kvdXNlci9kODNiNGYwNS05N2FiLTQ1YjAtYjFlMC01MDcxZGQ1ODE2ZGQiLCJpYXQiOjE1NjU2NDg5NTUsImlzcyI6Im
h0dHBzOi8vdjEuYXBpLnVzLmphbnJhaW4uY29tLzAwMDAwMDAwLTAwMDAtMDAwMC0wMDAwLTAwMDAwMDAwMDAwMC9sb2dpbi
IsImp0aSI6IjdPS1Z0MkEybzl3bnlDaUtFZUFJUzk5TyIsIm5vbmNlIjoibjZuaWZod2FnOTkiLCJzdWIiOiJkODNiNGYwNS
05N2FiLTQ1YjAtYjFlMC01MDcxZGQ1ODE2ZGQifQ.FVtvQbHPrJGspbUW51vemB0rfgaHh7f2h6oooVhSPSSRhOd-gq68GnS
1XcrUJ97vvQUH6_mBpoBZFvKXYO0zJ_MT7H4fFcxe8RlEEUEbp_Wmjd1078IPwaa9xZ4LBeizKQ5EYALIMryASg2cy4Q7Bfs
heEbdvi43dEgYkOYe_5boUcfH32EWq86adM3cz8P_UdUMHWOpToFnkwQQeNWx5O9IFXJ-ITW4RGl2c6sZCrtL2RHpyK7KEav
HAzrKxtdvB5rVL25WDUJKyID7zsiH4VDhifvMH4qRJePa93491YOo50CLyqmkdHqU5DKsjb_rttcd5xxYkPeGvCqRgAzFbg"
}

Learn more about tokens by reading the article OpenID Connect Token Reference.


View/Update User Profile

After the user has an active session, provide a profile action element on your site/app (for example, a My Profile button). When the user clicks the action element, make a call to the /auth-ui/profile endpoint to display the Akamai-hosted profile page to the user.


Request Template

https://v1.api.<region>.janrain.com/<customer-id>/auth-ui/profile?client_id=<oidc-client-id>


Example Request

https://v1.api.us.janrain.com/12345678-1234-1234-1234-123456789012/auth-ui/profile?client_id=1ab23456-7c8d-90ef-g123-45hij6789012

Making the /auth-ui/profile call displays the Akamai-hosted profile page. For example:

Note that each of the three sections from the profile landing page can be called directly, if desired, by modifying the endpoint:

User Profile Section

Endpoint URL

Personal Data

.../auth-ui/profile/data

Account Security

.../auth-ui/profile/security

Privacy Settings

.../auth-ui/profile/privacy


  Step 8: Configure CNAMES