customize-authorization.md

Customize Authorization

In widget, we implement RingCentral authorization including authorization code flow and authorization code with PKCE flow for user login. But you can also implement the authorization flow out of the widget, and pass authorization code to widget for login.

Prerequisites: Customize clientId and clientSecret

Pass RingCentral authorization code:

Adapter JS way

<script>
  (function() {
    var rcs = document.createElement("script");
    rcs.src = "https://ringcentral.github.io/ringcentral-embeddable/adapter.js?authorizationCode=ringcentral_authorization_code&clientId=ringcentral_app_client_id&clientSecret=ringcentral_app_client_secret";
    var rcs0 = document.getElementsByTagName("script")[0];
    rcs0.parentNode.insertBefore(rcs, rcs0);
  })();
</script>

Iframe way

<iframe width="300" height="500" id="rc-widget" allow="microphone" src="https://ringcentral.github.io/ringcentral-embeddable/app.html?authorizationCode=ringcentral_authorization_code&clientId=ringcentral_app_client_id&clientSecret=ringcentral_app_client_secret">
</iframe>

PostMessage way

document.querySelector("#rc-widget-adapter-frame").contentWindow.postMessage({
  type: 'rc-adapter-authorization-code',
  callbackUri: "http://localhost:8080/redirect.html?code=authorization_code&state=MTU5OTE0MzE5NTQ5OQ%3D%3D"
}, '*');

Notice

For authorization code flow, clientId and clientSecret is required with authorizationCode. The app needs clientSecret to exchange token. The authorization code should be generated with same RingCentral app client id and secret.

For authorization code with PKCE, only clientId is required. The widget will create code_verifier and code_challenge pair for generating oauth uri and exchanging token. So you need to get oauth login URI from it. You can get oauth login uri from this event.