Preview Technologies Limited
            Knowledge Base Developers Center Authentication OAuth2.0 Implicit Grant

            Authorize user and get access token from webpage

            HTML/JS One Page App OAuth 2.0

            It simply used the Implicit grant. Suitable for user agent browser based application built with HTML/JavaScript. So client secret is not necessary and the client secret will not be stored in client's browser at all.

            Build the request URL, redirect user to that URL, User will login, Authorize client, redirect back to that HTML/JavaScript page with Access token as URL fragment like #access_token=YOUR_ACCESS_TOKEN&token_type=bearer&expires_in=3600&state=csrf_token

            Required Parameters

            • response_type = token
            • client_id = client id
            • redirect_url = redirect url
            • scope = basic email
            • state = random csrf token

            Query Parameters Description

            • response_type query parameter's value must be token in this user agent based OAuth 2.0 flow.
            • client_id You can get the client id from developer console. Only User Agent based OAuth 2.0 client are authorized to run this OAuth 2.0 flow. Any other types of client id can't go through this flow.
            • redirect_url You must need to provide a valid redirect url which was already added in this client from developer console
            • scope By default anybody can use basic and email scope unless any other scopes are necessary. Every scope should be separated by space. For example basic email
            • state To check the request flow integrity it's recommended to use any random string as state. Because after user's authorization the OAuth server will return the same state with access token. So you can verify the request integrity

            OAuth 2.0 Authorization Flow

            • Build the full URL with all those above query parameters.
            • Redirect the user to the final URL you just built
            • User will authorize or deny your client to access their info based on scopes you asked permission for
            • If user authorize, then our OAuth server will return with access_token, expires_in, token_type, state values as URL fragement. For example #access_token=YOUR_ACCESS_TOKEN&token_type=bearer&expires_in=3600&state=csrf_token
            • Now extract that access token you can pass that access token as HTTP request header (Authorization Bearer YOUR_ACCESS_TOKEN) to communicate with our API servers and other services you are allowed to work with

            Parse Fragmented URL

            To parse the above successful response URL to retrive access token info. Here is little JavaScript snippet without any dependency.

            
            // Javascript snippet to extract information that comes after successful authorization
            
            var url = 'https://app.getpostman.com/oauth2/callback#access_token=YOUR_ACCESS_TOKEN&token_type=bearer&expires_in=3600&state=csrf_token';
            access_token = url.match(/\#(?:access_token)\=([\S\s]*?)\&/)[1];
            expires_in = url.match(/(?:expires_in)\=([\S\s]*?)\&/)[1];
            token_type = url.match(/(?:token_type)\=([\S\s]*?)\&/)[1];
            state = url.match(/(?:state)\=([\S\s]*)/)[1];
            
            var oauth = {
                access_token: access_token,
                expires_in: expires_in,
                token_type: token_type,
                state: state
            };
            
            console.log(JSON.stringify(oauth));
            
            //Output: {"access_token":"YOUR_ACCESS_TOKEN","expires_in":"3600","token_type":"bearer","state":"csrf_token"}

            Updated: 15 Apr 2018 06:12 AM
            Helpful?  
            Help us to make this article better
            0 0