NativeScript LinkedIn OAuth 2 插件

用法

如果您想要快速入门，可以从两个演示应用程序之一开始

• Angular 演示应用程序

引导

当您的应用程序启动时，您需要注册一个或多个认证提供者以供 nativescript-oauth2 插件使用。您将使用以下代码来注册提供者。

NativeScript 核心版

如果您正在使用 NativeScript 核心版，请打开 app.ts 并在 application.start(); 之前添加以下注册代码

带有 Angular 的 NativeScript

如果您正在使用 Angular 且未使用 <page-router-outlet，则必须启用框架，以便插件可以打开一个带有登录屏幕的新本地页面。要执行此操作，请打开您的 main.ts 文件。您需要显式使用框架，因此请确保向 platformNativeScriptDynamic 传递一个选项对象，并将 createFrameOnBootstrap 标志设置为 true，如下所示。

// main.ts
platformNativeScriptDynamic({ createFrameOnBootstrap: true }).bootstrapModule(
  AppModule
);

如果您的组件中已经有 <page-router-outlet>，则无需执行此操作。

然后，在调用登录之前，在您的 Auth 服务中（如演示-angular 项目中所示）的某个地方添加以下注册代码

NativeScript-Vue

如果您正在使用 NativeScript-Vue，则必须在应用程序引导时将此注册代码添加到某个位置。Vue 演示应用程序包含在 GitHub 存储库中。

// This is the provider registration example code

import { configureTnsOAuth } from 'nativescript-oauth2';

import {
  TnsOaProvider,
  TnsOaProviderLinkedIn,
  TnsOaProviderOptions
} from 'nativescript-oauth2/providers';

function configureOAuthProviderLinkedIn(): TnsOaProvider {
  const linkedinProviderOptions: TnsOaProviderOptions = {
    clientId: '691208554415641',
    redirectUri: 'https://www.linkedin.com/connect/login_success.html',
    scopes: ['email']
  };
  const linkedinProvider = new TnsOaProviderLinkedIn(linkedinProviderOptions);
  return linkedinProvider;
}

configureTnsOAuth(configureOAuthProviderLinkedIn());

该插件提供了一些有用的接口，您可以使用这些接口来实现提供者以及可以传递给每个提供者构造函数的选项。您不需要使用这些接口，但它们是很有帮助的指南。上面的代码显示了这些接口。

最后调用 configureTnsOAuth() 的代码接受一个提供者数组并将其注册为可供使用。

登录

当您准备登录或作为对登录按钮的点击事件的响应时，您可以创建一个新的 TnsOAuthClient 实例，并在该实例上调用 loginWithCompletion()。

import { TnsOAuthClient, ITnsOAuthTokenResult } from 'nativescript-oauth2';

const client = new TnsOAuthClient(providerType);

client.loginWithCompletion((accessCode: string, error) => {
  if (error) {
    console.error('back to main page with error: ');
    console.error(error);
  } else {
    console.log('back to main page with access code: ');
    console.log(accessCode);
  }
});

登录完成后，将调用完成处理程序并返回结果。