チェックアウト最新の書籍の携帯電話番号の機能を介してHMSのアカウントキットを本アプリ(ネイティブに反応)を介して

導入

この記事では、アプリケーションでHuaweiアカウントキットを統合されます.アカウントキットでは、シンプルで安全で迅速なサインインと認証機能を提供します.AuthサービスSDKを我々のアプリに統合することによって、我々は簡単に、そして、速く我々のユーザーのために登録とサインのような機能を提供することができます.我々は、携帯電話番号、電子メールアドレス、Facebook、wechat等の認証モードの1つまたは複数のユーザーを提供するために選択することができます我々は、アプリケーションには、携帯電話番号認証モードを統合するので、私たちのユーザーが安全にアプリケーションに署名する携帯電話番号やパスワードや検証コードを使用することができます.

ネイティブに反応する

ネイティブは、AndroidとIOSプラットフォームの両方で移植可能なJavaScriptのみの助けを借りて、本物でエキサイティングなモバイルアプリケーションを作成するのに役立ちます.
だけでコードを一度、反応ネイティブアプリは、開発期間を節約するのに役立ちますIOSとAndroidプラットフォームの両方で利用可能です.
Return Nativeは、JavaScriptコードをビルドするUIコンポーネントの階層を構築するフレームワークです.
これは、通常のIOSとAndroidアプリと同じ基本的なUIビルディングブロックを使用します.

要件

任意のオペレーティングシステム(MacOS、LinuxとWindows).

HMS 4.0.2.300以降でHuawei電話を持っている必要があります.

Android Studio、JDK 1.8、SDKプラットフォーム26とGradle 4.6をインストールしたラップトップまたはデスクトップを持っている必要があります.

最小APIレベル21が必要です.

必要なEMUI 9.0.0以降のバージョンデバイス.

HMS依存関係を統合する

Huawei開発者として最初の登録とHuawei開発者ウェブサイトで完全なアイデンティティ検証Huawei ID .

Android Studioでプロジェクトを作成し、Android Studioプロジェクトの作成を参照してください.

SHA - 256証明書指紋を生成します.

SHA - 256証明書指紋を生成する.「ビュー」ウィンドウを選択しますSHA256 code .
またはSHA 256コードで説明したCMDを使用します

Create an App in AppGallery Connect.

Agconnectサービスをダウンロードしてください.JSONファイルのアプリ情報、コピーと貼り付けアプリのディレクトリの下にAndroidのプロジェクトでは、次のように.

SHA - 256証明書指紋を入力して保存をクリックします.

をクリックしてアカウントキットを有効にします.

ネイティブプロジェクトの準備

環境設定、下記リンクを参照.
https://reactnative.dev/docs/environment-setup

以下のコマンドを使用してプロジェクトを作成します.react-native init project name

ダウンロードネイティブAccount Kit SDK そして、反応ネイティブプロジェクトのノードモジュールディレクトリの下にそれを貼り付けてください.ノードを見つけることができない場合は、CLIを使用してプロジェクトディレクトリの下にコマンドを実行します.“npm install” & “npm link”

Androidレベルのビルドを構成します.グラグラ
ビルドスクリプト/リポジトリとmaven {url 'http://developer.huawei.com/repo/'}

アプリケーションレベルのビルドを構成します.グレード.(依存性を追加する)Implementation project (“:react-native-hms-account”)

アカウントキットSDKのリンク.
プロジェクトディレクトリでコマンドを実行するreact-native link react-native-hms-account

Androidに許可を下に追加します.マニフェストファイル.

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

認証サービスの有効化
( I )AppGalleryにログインして、私のプロジェクトをクリックしてください.
( ii )プロジェクトリストからAuthサービスを有効にするプロジェクトをクリックします.
( iii )「構築」「Authサービス」を選択します.Authサービスを使用するのが初めての場合は、右上隅にある有効化をクリックします.

( IV )各認証モードの行の有効化を有効にするをクリックします.

詳細はこちらdocumentation.

Development

口座登録

モバイル番号ベースの登録のための検証コードを申し込む.確認コードは、携帯電話番号がこのユーザーに属することを確実とするためにユーザーの携帯電話番号に送られます.phoneAuthProviderを呼び出します.登録検証コードを申請するRequestVerifyCode.

let settings = new VerifyCodeSettings(
              VerifyCodeAction.REGISTER_OR_LOGIN,
              "zh_CN",
              30
            );
            PhoneAuthProvider.requestVerifyCode("countryCode", "phoneNumber", settings)
              .then((verifyCodeResult) => {
                // verifyCodeResult.shortestInterval
                // verifyCodeResult.validityPeriod
              })
              .catch((error) => {
                // error
              });

ユーザにモバイル番号を登録する.
アグウースを呼ぶ.ユーザーを登録するCreatePhoneUser.登録が成功した後、ユーザーは自動的に署名し、再度APIのサインを呼び出す必要はありません.パスワードはオプションで、ユーザーは検証コードを使用してログインできます.

AGCAuth.getInstance()
  .createPhoneUser(
    "countryCode",
    "phoneNumber",
    "password if you want",
    "verifyCode"
  )
  .then((signInResult) => {
    // signInResult.user
  })
  .catch((error) => {
    // error
  });

サイン入りの成功の後、Agcauthを呼んでください.ユーザーアカウントデータを取得するCurrentUser.

AGCAuth.getInstance()
  .currentUser()
  .then((user) => {
    if (user) {
      // A user signed in
    }
  });

パスワードで署名する

ページでAPP Gallery Connectからユーザー情報を取得し、ユーザーが署名したかどうかを確認します.ユーザーが署名した場合、ユーザーのホームページが表示されますユーザーが署名していない場合は、ページ内の印が表示されます.

AGCAuth.getInstance()
  .currentUser()
  .then((user) => {
    if (user) {
      // A user signed in
    }
  });

アグウースを呼ぶ.サインインサイン.

let credential = PhoneAuthProvider.credentialWithPassword(
    "countryCode",
    "phoneNumber",
    "password"
  );
  AGCAuth.getInstance()
    .signIn(credential)
    .then((signInResult) => {
      if (signInResult && signInResult.user) {
        // signInResult.user get user info
      }
    })
    .catch((error) => {
      // error
    });

サイン入りの成功の後、Agcauthを呼んでください.ユーザーアカウントデータを取得するCurrentUser.

検証コードで署名する

ページでAPP Gallery Connectからユーザー情報を取得し、ユーザーが署名したかどうかを確認します.ユーザーが署名した場合、ユーザーのホームページが表示されますユーザーが署名していない場合は、ページ内の印が表示されます.

AGCAuth.getInstance()
       .currentUser()
       .then((user) => {
          if (user) {
            // A user signed in
          }
        });

phoneAuthProviderを呼び出します.検証コードに適用するRequestVerifyCode.

let settings = new VerifyCodeSettings(
      VerifyCodeAction.REGISTER_OR_LOGIN,
      "zh_CN",
      30
    );
    PhoneAuthProvider.requestVerifyCode("countryCode", "phoneNumber", settings)
      .then((verifyCodeResult) => {
        // verifyCodeResult.shortestInterval
        // verifyCodeResult.validityPeriod
      })
      .catch((error) => {
        // error
      });

アグウースを呼ぶ.サインインサイン.

let credential = PhoneAuthProvider.credentialWithVerifyCode(
        "countryCode",
        "phoneNumber",
        null,
        "verificationCode"
      );
      AGCAuth.getInstance()
        .signIn(credential)
        .then((signInResult) => {
          if (signInResult && signInResult.user) {
            // signInResult.user get user info
          }
        })
        .catch((error) => {
          // error
        });

サイン入りの成功の後、Agcauthを呼んでください.ユーザーアカウントデータを取得するCurrentUser.

テスト
次のコマンドを使用してAndroidアプリを実行します.react-native run-android

結果

結論

この記事では、我々はどのようにアプリケーションに携帯電話番号認証モードを統合するために、我々のユーザーは、携帯電話の番号やパスワードや検証コードを使用してアプリケーションに安全に署名することができますを学んだ.

Reference

アカウントキットDocumentation
アカウントキットTraining Video