OAuth has been adopted by many organizations, large and small, as the (current) best standard for authenticating and authorizing their users. OAuth 2.0 being the latest iteration of the standard and it's used to offload the burdensome security related parts of applications to third party experts.
While writing your own OAuth flow for your apps could be a fun experience (for those of you that really enjoy headaches), most of the time we are happy plugging in a third party SDK so we can authenticate against their service.
In the NativeScript world, we could use third party SDKs which would require you to integrate them yourself, or we could simply use the new OAuth plugin available on NPM called nativescript-oauth. The plugin is now out of beta and supports both iOS and Android. Here's how you can start.
You'll have to do a little preparation before your app will work with a third party authentication provider, since you're relying on them to do the work for you. This will require you to register your app with the third party such as Microsoft or Facebook. Then you're off to the races. And if you already have the app registered, then great!
You want to decide what third party OAuth 2.0 provider you want to use for your users to login. If you're writing an app that uses the Facebook API, then you're going to need an access token provided by Facebook's authentication servers. If you're writing an app that uses the Microsoft Graph or Office 365, you'll need an access token from Microsoft.
Then you need to register your app with the third party provider.
Once you've created your NativeScript project and have your app registered with your OAuth provider, you can install the NativeScript OAuth plugin, which is just a NPM package that is easily installed using this command
Wherever you need to use the nativescript-oauth module, you need to import it
Instructions on registering a Microsoft Live app or Office 365 app or Microsoft Graph app are here
In your app.ts file (or app.js if you're not using TypeScript), you will bootstrap your Microsoft authentication provider data bits like this
Instructions on setting up your app with Facebook are here.
Again in your app.ts file you will bootstrap your Facebook authentication provider like this
Notice that Microsoft only requires the ClientId and scope, but Facebook also require the ClientSecret. These are all values you should have access to when registering your app. ClientId is the identifier of your application and is some unique value. Microsoft uses UUIDs and Facebook uses long integers. Scope tells the provider what permissions your app has. I’m sure you’ve seen the screens that say something like “App so-and-so want to post to Facebook on your behalf”; well that’s the permission level that you control with scope. Read the provider’s documentation to get all the available scopes.
Once you have that done, you can call the login function whenever you need to authenticate your user. This will probably be on the login page.
You can get to the access token whenever you need to pass it to the API
When you are calling the API of the service you are using, whether it is Office 365, Microsoft Graph, or Facebook, you will need to pass it the access token with every request so it knows who you are, so to speak.
We included a convenience function that will check for token expiration, attempt to get a fresh token from the provider, and reathenticate the user if necessary. This is the ensureValidToken function. You can use it before each of your calls to the API, like this
Go on and take advantage of this helpful plugin for NativeScript, especially if you are going to be using Office 365 or the Microsoft Graph API, as those will have a separate TypeScript based SDK out that’s in development as this is being published. Contributions are also welcomed at the project’s GitHub home.