Website Integration
This is a guide written to help you integrate Gazepass Paswordless login into your website

Auth Flow

Here's how a user is authenticated using Gazepass:
    1.
    First, the user clicks on the Passwordless Sign In button on your website
    2.
    The user sees a popup where they authenticate
    3.
    Once the user completes authentication an authorization code is generated
    4.
    This authorization code is passed from the authentication popup to your website/web app (using GazepassJS SDK)
    5.
    This authorization code is then sent from your web app to your backend API/server
    6.
    Your backend API/server then makes an HTTP POST call to Gazepass API with the authorization code, your API key and your API secret key
    7.
    Gazepass API responds with an ID token (JSON Web token containing user info) and an object that contains information on the user (the parsed ID token)
To do this, you have to integrate Gazepass into your web app (for steps 1β€”5) and then add a few lines of code to your backend for steps 6β€”7 (to verify user details).

Install GazepassJS SDK

If you're using npm in your project, you can run this command to install our Gazepass SDK
1
$ npm install --save [email protected]
Copied!
Alternatively, you can also use yarn to install the SDK:
1
Copied!
If you're using regular HTML/CSS/JS (without a JS package manager), you can also import the library directly like this:
1
<script type="text/javascript"
2
src="https://unpkg.com/[email protected]/dist/gazepass.js">
3
</script>
Copied!

Integration

If you've installed GazepassJS SDK with npm or yarn , you may import it into your JS code using require. Here's how you could do that:
1
var gazepassjs = require("gazepassjs");
Copied!
If you're not using npm or yarn , adding the script tag above should automatically import GazepassJS SDK.
In either case, here's how you could invoke the authentication method and get a user's authorization code in your website:
HTML
JS
1
<html>
2
<body>
3
<!-- add script tags to load your JS code -->
4
<button onclick="gazepassSignIn()">Passwordless Sign In</button>
5
</body>
6
</html>
Copied!
1
const API_KEY = "<insert API Key>";
2
var gp = new Gazepass(API_KEY);
3
​
4
async function gazepassSignIn() {
5
var resp = await gp.signIn();
6
var authorization_code = resp["code"];
7
// Send authorization_code to your backend/server
8
// Your backend/server can verify the code using Gazepass API
9
}
Copied!
Important points to rememberβ€”
    1.
    Gazepass object must be initialized with an API Key (that you can create on the Developer Console on gazepass.com)
    2.
    signIn method must be called inside a user invoked event handler (like onclick in this example)
    3.
    Once you have the authorization code, you must verify it from your backend
    4.
    Do not expose your API Secret Key on your front end (this is why you need to verify the token from your backend β€” the verification requires the API secret key)

Backend Authorization Code Verification

Once you have the authorization code, you must verify it on your backend (so you need to send it to your own backend server first). Verifying an authorization code is just one HTTP POST request to our /oauth2/token endpoint (from your backend).
Authorization codes are intended for one-time use only. Once you verify it and receive the user credentials as a response, you may not use the same authorization code again.
Here's a sample cURL command to make the HTTP request to Gazepass API and a sample valid response from the API.
cURL Template
cURL Example
Valid Response (200 OK)
1
curl --location --request POST 'https://api.gazepass.com/user/oauth2/token' \
2
--header 'Content-Type: application/json' \
3
--data-raw '{
4
"client_id": "<Insert API Key>",
5
"client_secret": "<Insert API Secret Key>",
6
"grant_type": "authorization_code",
7
"scope": "openid",
8
"redirect_uri": "<Insert URL from which popup was initiated>",
9
"code": "<Insert authorization code>"
10
}'
Copied!
1
curl --location --request POST 'https://api.gazepass.com/user/oauth2/token' \
2
--header 'Content-Type: application/json' \
3
--data-raw '{
4
"client_id": "189cf59a-5c69-4a10-bc5c-a8561bc5d943",
5
"client_secret": "ab593326-c8b6-4503-a0be-1ba08fe87a05",
6
"grant_type": "authorization_code",
7
"scope": "openid",
8
"redirect_uri": "https://mywebsite.com",
9
"code": "0e513d2f-d33b-4c0f-a25f-31036cdf2c64"
10
}'
Copied!
1
{
2
"id_token": "[Signed JWT ID Token]",
3
"parsed_id_token": {
4
"sub": "[User ID | UUID string]",
5
"aud": "[Your API key]",
6
"email": "[User verified email]",
7
"iat": "[Time of ID Token Issuance]",
8
"exp": "[Time of ID Token Expiry]",
9
"email_verified": "[Boolean]",
10
"details": {
11
...
12
}
13
},
14
...
15
}
Copied!
The JSON object sent as the request body has 6 required parameters (as shown in the cURL request):
Parameter Name
Description
client_id
Your API Key
client_secret
Your API Secret
redirect_uri
URL of the webpage from which the code was generated (i.e. your web URL)
code
The authorization code
scope
openid
grant_type
authorization_code
Depending on your platform, you can use different libraries to make the HTTP requestβ€”we are also working on backend SDKs to be released soon. Here are some sample code snippets from various backend platforms:
NodeJS
Python
PHP
Golang
1
// NodeJS API Request
2
import axios from 'axios';
3
​
4
async function verifyCode(authorization_code, api_key, api_secret, redirect_uri) {
5
var resp = await axios.post(
6
"https://api.gazepass.com/user/oauth2/token",
7
{
8
"client_id": api_key,
9
"client_secret": api_secret,
10
"grant_type": "authorization_code",
11
"code": authorization_code,
12
"scope": "openid",
13
"redirect_uri": redirect_uri
14
}
15
)
16
​
17
return resp.data;
18
}
Copied!
1
import requests
2
​
3
def verifyCode(authorization_code, api_key, api_secret, redirect_uri):
4
req = requests.post(
5
"https://api.gazepass.com/user/oauth2/token",
6
data={
7
"client_id": api_key,
8
"client_secret", api_secret,
9
"grant_type": "authorization_code",
10
"code": authorization_code,
11
"scope": "openid",
12
"redirect_uri": redirect_uri
13
}
14
)
15
​
16
return req.json()
Copied!
1
function verifyCode($authorization_code, $api_key, $api_secret, $redirect_uri) {
2
$ch = curl_init("https://api.gazepass.com/user/oauth2/token");
3
$reqData = array(
4
"code" => $authorization_code,
5
"client_id" => $api_key,
6
"client_secret" => $api_secret,
7
"scope" => "openid",
8
"redirect_uri" => $redirect_uri,
9
"grant_type" => "authorization_code"
10
);
11
$reqDataJSON = json_encode($reqData);
12
curl_setopt($ch, CURLOPT_POST, 1);
13
curl_setopt($ch, CURLOPT_POSTFIELDS, $reqDataJSON);
14
curl_setopt($ch, CURLOPT_HTTPHEADER, array("Content-Type: application/json"));
15
16
return curl_exec($ch);
17
}
Copied!
1
package auth
2
​
3
import (
4
"bytes"
5
"encoding/json"
6
"errors"
7
"io/ioutil"
8
"net/http"
9
​
10
"github.com/google/uuid"
11
)
12
​
13
type AuthUser struct {
14
ID *uuid.UUID `json:"id,omitempty"`
15
Email string `json:"email,omitempty"`
16
}
17
​
18
type AuthResponse struct {
19
User *AuthUser `json:"user"`
20
Verified bool `json:"verified"`
21
}
22
​
23
func VerifyCode(authorization_code, api_key, api_secret, redirect_uri string) (*AuthResponse, error) {
24
reqDataJSON, err := json.Marshal(map[string]string{
25
"code": authorization_code,
26
"client_id": api_key,
27
"client_secret": api_secret,
28
"scope": "openid",
29
"redirect_uri": redirect_uri,
30
"grant_type": "authorization_code",
31
})
32
​
33
if err != nil {
34
return nil, errors.New("Couldn't create JSON")
35
}
36
​
37
resp, err := http.Post("https://api.gazepass.com/user/oauth2/token", "application/json", bytes.NewBuffer(reqDataJSON))
38
if err != nil {
39
return nil, errors.New("Couldn't make HTTP request")
40
}
41
​
42
if resp.StatusCode != http.StatusOK {
43
return nil, errors.New("Error from Gazepass API")
44
}
45
​
46
bodyBytes, err := ioutil.ReadAll(resp.Body)
47
if err != nil {
48
return nil, errors.New("Couldn't read body")
49
}
50
​
51
var authResponse AuthResponse
52
err = json.Unmarshal(bodyBytes, &authResponse)
53
if err != nil {
54
return nil, errors.New("Couldn't parse JSON")
55
}
56
​
57
return &authResponse, nil
58
}
59
​
Copied!
If you need assistance in integration, please do join our Slack workspace. We'd love to help you every step of the way and answer your questions.
Last modified 10mo ago