Tutorials>Learn RingCentral OAuth Implicit Grant Flow in JavaScript

A step by step tutorial to get you started with RingCentral OAuth Implicit grant flow in JavaScript.

Start Tutorial

Setup

Firstly, clone this project from github

$ git clone https://github.com/ringcentral-tutorials/oauth-implicit-js-demo.git
$ cd oauth-implicit-js-demo

Configuration

Edit the ./public/config.js file to configure your client ID and redirect URL, etc.

$ cd ./public
$ cp config-sample.js config.js
$ vi config.js

Please visit Developer Portal to apply client ID. And ensure the redirect URI in your config file has been entered in your app configuration. By default, the URL is set to the following for this demo:

http://localhost:8080/callback.html

Serve Static files

Serve the static page with http-server.

$ npm install -g http-server
$ http-server public

Include the config file, RingCentral SDK and related libraries into HTML file.

Create RingCentral SDK instance.

Get login URL from RingCentral SDK instance.

Open a new window with the login URL.

When login finished, popup-window will redirect to the callback URL(the configured redirect URL). The callback URL contains the access_token that used to require RingCentral Platform API.

Now we get this access token, but it will expire in one hour.

We can refresh the token seamlessly with a hidden iframe using browser session.

The browser session will expire in half hour, so we can to refresh token every 15 minites to keep it alive.

When refreshing finished, iframe will redirect to the callback URL(the configured redirect URL). The callback URL contains the new access_token. We need to update old access token with new token.