A Polymer 2.0 Element that performs the OAuth2 authorization code flow using a popup window.
- Properly polyfill
URL,URLSearchParamsandfetch, so thatfetchcan work withURLSearchParams-objects.<oauth-receiver>only needsURLSearchParams. - Set up your OAuth2 config properly (Client ID, Redirect URL, etc.)
- Include the
oauth-authorizatorelement on your page like this:
<oauth-authorizator access-token="{{yourAccessToken}}"
authorization-url="The URL that will be loaded in the popup window, e.g. https://accounts.spotify.com/authorize"
client-id="Your Client ID"
redirect-url="The URL the popup window will be redirected to when authing has completed"
scopes="The scopes, either as array or space-separated string"
token-exchange-url="The URL to exchange the authorization code into an access and refresh token pair"
token-refresh-url="The URL where your token refresh server is located">
</oauth-authorizator>- Set up the
oauth-receiveron the redirect page
<oauth-receiver target="Optional, the site you're hosting your website on. E.g. https://festify.us"></oauth-receiver>- Call
oauth-authorizator.login()at the appropriate time to start the authorization process. The access token will appear as observable property atoauth-authorizator.accessTokenor will be available through the Promise's return value.
If you set the manual-attribute on <oauth-receiver>, the element will not attempt to parse the parameters on page load. Instead, you will need to call <oauth-receiver>.receive() in order to parse and send the OAuth get parameters. This could be useful if you want to show the user some content before redirecting back to the application.
MIT