NativeScript OAuth 插件介绍

OAuth 已经被许多大大小小的组织采用，作为当前用户身份验证和授权的最佳标准。OAuth 2.0 是该标准的最新版本，它用于将应用程序中繁重的安全相关部分卸载给第三方专家。

虽然为您的应用程序编写自己的 OAuth 流程可能是一段有趣的体验（对于那些真正喜欢头痛的人来说），但在大多数情况下，我们很乐意插入第三方 SDK，以便我们可以针对其服务进行身份验证。

在 NativeScript 世界中，我们可以使用第三方 SDK，这需要您自己集成它们，或者我们可以简单地使用 NPM 上提供的新 OAuth 插件，名为 nativescript-oauth。该插件现已退出测试版，并支持 iOS 和 Android。以下是如何开始使用。

OAuth 是什么？

关键在于，许多 API 受访问令牌保护，服务器之间的 OAuth 交互旨在生成其中一个令牌，您的应用程序可以将其与您正在进行的常规调用一起发送到您正在使用的 API。要获取访问令牌，您的用户需要在第三方身份验证网站上登录。

我为什么要使用这个插件？

1. 不使用任何第三方库。所有代码都用 JavaScript 编写
2. 当然，它是开源的。我们已经接受了社区贡献，这很棒
3. OAuth 的所有内部工作都已抽象化，因此您无需担心
4. 与我们正在努力开发的即将推出的 Microsoft Graph TypeScript SDK 无缝集成
5. 插件是用 TypeScript 构建的，因此它开箱即用地提供 TypeScript 支持 - 无需额外的定义

先决条件

在您的应用程序能够与第三方身份验证提供程序一起使用之前，您需要做一些准备工作，因为您依赖它们为您完成工作。这将要求您在第三方（如 Microsoft 或 Facebook）处注册您的应用程序。然后您就可以开始了。如果您已经注册了应用程序，那就太好了！

您需要决定要为您的用户登录使用哪个第三方 OAuth 2.0 提供程序。如果您正在编写使用 Facebook API 的应用程序，那么您将需要 Facebook 身份验证服务器提供的访问令牌。如果您正在编写使用 Microsoft Graph 或 Office 365 的应用程序，则需要来自 Microsoft 的访问令牌。
然后，您需要在第三方提供程序处注册您的应用程序。

如果您想观看有关使用 Microsoft 帐户设置应用程序的视频教程，可以在这里查看。

设置说明

创建 NativeScript 项目并在 OAuth 提供程序处注册您的应用程序后，您可以安装 NativeScript OAuth 插件，它只是一个 NPM 包，可以使用以下命令轻松安装

tns plugin add nativescript-oauth

在您需要使用 nativescript-oauth 模块的任何地方，都需要导入它

import * as tnsOAuthModule from 'nativescript-oauth';

Office365/Microsoft Graph

有关注册 Microsoft Live 应用程序或 Office 365 应用程序或 Microsoft Graph 应用程序的说明在这里

在您的 app.ts 文件（如果您不使用 TypeScript，则为 app.js）中，您将像这样引导您的 Microsoft 身份验证提供程序数据位

var o365InitOptions : tnsOAuthModule.TnsOAuthOptionsOffice365 = {
    clientId: 'e392f6aa-da5c-434d-a42d-a0e0a27d3964', //client id for application (GUID)
    scope: ['Files.ReadWrite', 'offline_access']
};
tnsOAuthModule.initOffice365(o365InitOptions);

注意：请确保在执行 application.start(…) 之前执行此操作。

Facebook

有关使用 Facebook 设置应用程序的说明在这里。

同样在您的 app.ts 文件中，您将像这样引导您的 Facebook 身份验证提供程序

var facebookInitOptions : tnsOAuthModule.TnsOAuthOptionsFacebook = {
    clientId: '1819818654921817',
    clientSecret: 'b7e58f212b51e4d639bed857171c992a',
    scope: ['email']
};
tnsOAuthModule.initFacebook(facebookInitOptions);

注意：同样，请确保在 application.start(…) 之前执行此操作。

请注意，Microsoft 只需要 ClientId 和 scope，但 Facebook 还需要 ClientSecret。这些都是您在注册应用程序时应该可以访问的所有值。ClientId 是您应用程序的标识符，并且是一些唯一值。Microsoft 使用 UUID，而 Facebook 使用长整数。Scope 告诉提供程序您的应用程序有哪些权限。我相信您已经看到过一些屏幕，上面写着“应用程序如此这般想要代表您发布到 Facebook”；好吧，那就是您使用 scope 控制的权限级别。阅读提供程序的文档以获取所有可用的范围。

登录

完成此操作后，您可以在需要对用户进行身份验证时调用登录函数。这可能是在登录页面上。

tnsOAuthModule.login()
     .then(()=>{
       console.log('logged in');
     })
     .catch((er)=>{
       console.log(er);
     });

login 函数返回一个 JavaScript Promise 对象，因此您可以监听成功登录或失败。

您可以在需要将其传递给 API 时获取访问令牌

var token = tnsOAuthModule.accessToken();

进行身份验证请求

当您调用正在使用的服务的 API 时，无论是 Office 365、Microsoft Graph 还是 Facebook，您都需要在每次请求中都传递访问令牌，以便它知道您是谁。

我们包含了一个方便的函数，它将检查令牌是否过期，尝试从提供程序获取新的令牌，并在必要时重新对用户进行身份验证。这是 ensureValidToken 函数。您可以在每次调用 API 之前使用它，如下所示

tnsOAuthModule.ensureValidToken()
     .then((token: string) => {
       //OK to call the API
     })
     .catch((er)=>{
       //log error
     });

总结

继续使用此有用的 NativeScript 插件，尤其是在您将使用 Office 365 或 Microsoft Graph API 时，因为这些插件将有一个单独的基于 TypeScript 的 SDK，该 SDK 正在开发中，并在发布时发布。欢迎在项目的 GitHub 主页上做出贡献。