NativeScript Social Login

使用 Facebook 和 Google 登录进行用户认证。

先决条件

前往 https://console.firebase.google.com/ 并注册一个免费账户。您的第一个 'Firebase' 将自动创建，并通过类似 https://n-plugin-test.firebaseio.com 的 URL 提供访问。

在 Google 控制台中打开您的 Firebase 项目，然后点击 '添加应用' 以添加 iOS 和/或 Android 应用。按照步骤操作（确保 bundle id 与 package.json 中的 nativescript.id 相同，然后您将能够下载

• iOS: GoogleService-Info.plist，您需要将其添加到 NativeScript 项目的 app/App_Resources/iOS/GoogleService-Info.plist

• Android: google-services.json，您需要将其添加到 NativeScript 项目的 app/App_Resources/Android/google-services.json

安装

tns plugin add @martinbuezas/nativescript-social-login

Android 配置

Strings.xml

将您的 Facebook 应用 ID 添加到 App_Resources/Android/src/main/res/values/strings.xml - 如果该文件不存在，请创建它，并不要忘记添加您应用的名字和 kimera 标题。

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <string name="app_name">{{ YOUR_APP_NAME }}</string>
  <string name="title_activity_kimera">{{ YOUR_APP_NAME }}</string>
  <string name="facebook_app_id">{{ YOUR_FACEBOOK_APP_ID }}</string>
  <string name="fb_login_protocol_scheme">fb{{ YOUR_FACEBOOK_APP_ID }}</string>
</resources>

AndroidManifest.xml

1. 将命名空间 xmlns:tools="http://schemas.android.com/tools" 添加到您的 <manifest> 标签。
2. 检查所需的权限
3. 在 manifest 的 <application> 部分中添加 Facebook 配置

<?xml version="1.0" encoding="utf-8"?>
<manifest
  xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  >

    <!-- 2. Permission -->
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

    <application>
      <!-- 3. Facebook config -->
      <meta-data
        android:name="com.facebook.sdk.ApplicationId"
        android:value="@string/facebook_app_id"
      />
      <activity
        android:name="com.facebook.FacebookActivity"
        android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"
        tools:replace="android:theme"
        android:theme="@android:style/Theme.Translucent.NoTitleBar"
        android:label="@string/app_name"
      />
      <activity
        android:name="com.facebook.CustomTabActivity"
        android:exported="true"
      >
        <intent-filter>
          <action android:name="android.intent.action.VIEW" />
          <category android:name="android.intent.category.DEFAULT" />
          <category android:name="android.intent.category.BROWSABLE" />
          <data android:scheme="@string/fb_login_protocol_scheme" />
        </intent-filter>
      </activity>
  </application>
</manifest>

为调试构建设置 Android Google 登录

1. 您需要与您机器上的本地 Android 设置中的 debug.keystore 相关联的 SHA1 值。例如，以下是在 Windows 机器上可能运行的命令

keytool -list -v -keystore C:/users/brad.martin/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android

路径将根据您机器上的路径而变化。Android 调试构建使用您机器上默认的 debug.keystore 进行签名。因此，当您在设备上运行调试构建时，由于它具有与调试应用构建相关的 SHA1，Google 将允许使用正在运行的 .apk 进行身份验证。

2. 在 Google 开发者网站上 此处 创建一个应用。
   • 输入应用名称。这可以是任何名称，但它将显示给正在认证的用户。
   • 输入 android 包名。包名是 android 应用名称，位于 package.json 中的 nativescript 对象下，作为 id 属性。
   • 然后配置 Google 服务。
   • 选择 Google Sign-In
   • 输入您的签名证书 SHA-1。这是您在运行 keytool 命令的第一步中获得的 SHA1 值。
   • 启用 Google Sign-In
     • 如果您仅启用 Google Sign-In，则不需要在您的应用程序中配置配置文件。
3. 运行应用程序，并 loginWithGoogle() 应返回所选 Google 账户的相关数据。

iOS 配置

Info.plist

将您的 Facebook 应用 ID 和反转客户端 ID 添加到 app/App_Resources/iOS/Info.plist

<dict>
  <!-- ... -->

  <!-- FACEBOOK AND GOOGLE LOGIN start -->
  <key>FacebookAppID</key>
  <string>{{ YOUR_FACEBOOK_APP_ID }}</string>
  <key>FacebookDisplayName</key>
  <string>{{ YOUR_FACEBOOK_DISPLAY_NAME }}</string>
  <key>CFBundleURLTypes</key>
  <array>
    <dict>
      <key>CFBundleTypeRole</key>
      <string>Editor</string>
      <key>CFBundleURLSchemes</key>
      <array>
        <!-- Get it from your GoogleService-Info.plist -->
        <string>{{ REVERSED_CLIENT_ID }}</string>
      </array>
    </dict>
    <dict>
      <key>CFBundleTypeRole</key>
      <string>Editor</string>
      <key>CFBundleURLSchemes</key>
      <array>
        <string>fb{{ YOUR_FACEBOOK_APP_ID }}</string>
      </array>
    </dict>
  </array>
  <!-- FACEBOOK AND GOOGLE LOGIN end -->
</dict>

API

需要 / 导入插件

import { SocialLogin } from "@martinbuezas/nativescript-social-login";

export class MyClass {
  private sl: SocialLogin = SocialLogin.getInstance();
}

loginWithGoogle()

this.sl.loginWithGoogle({
    iosClientId: GOOGLE_IOS_CLIENT_ID,
    serverClientId: GOOGLE_SERVER_CLIENT_ID,
  })
  .then((result) => console.log("USER", result))
  .catch((error) => console.log("ERROR", error));

使用Facebook登录

this.sl.loginWithFacebook({
    scopes: ["profile", "email"]
  })
  .then((result) => console.log("USER", result))
  .catch((error) => console.log("ERROR", error));

许可证

Apache许可证版本2.0，2004年1月

待办事项

• 实现Android和iOS配置文件的环境处理
• 测试额外的Facebook登录作用域