【Cordova】Apple IDでアプリの会員登録とログインを実装できるプラグイン「cordova-plugin-apple-login」

先日、修正したアプリを Apple の審査に提出したところ、「Apple ID でログインする機能がないよ！やり直し！」と言われてしまいました。
…正直なところ、その存在をすっかり忘れてしまっており、現在慌てて実装しているところです。

で、実装にあたり、Cordova アプリで簡単に連携・Apple アカウントの情報を取得できるプラグインがあったので、こちらを導入しました。
「cordova-plugin-apple-login」 というプラグインで、GitHub のページはこちらから。

GitHub – pscsrv/cordova-plugin-apple-login
https://github.com/pscsrv/cordova-plugin-apple-login

インストールは下記のコマンドで行いました。

cordova plugin add cordova-plugin-apple-login --save

上記でも問題なくインストールできましたが、GitHub には下記のコマンドが記載してありました。

npm i cordova-plugin-apple-login --save

おそらくお好きな方を使用して貰えば問題ないかと思います。

インストールが完了したら、あとは下記のサンプルコードのように実装すればOKです！

SignInWithApple.isAvailable().then((isAvailable) => {
  if (isAvailable) {
    // Apple アカウントとの連携に成功 -> Apple アカウントの情報を取得する
    SignInWithApple.request({
      requestedScopes: [ SignInWithApple.Scope.Email, SignInWithApple.Scope.FullName ],  
    }).then((result) => {
      // Apple アカウントの情報を取得した時の処理  
    });
  } else {
    // Apple アカウントとの連携に失敗した時の処理
  }
});

まず 1行目では、そもそもアプリが Apple ログインを利用できるかを確認しています。
使用できる場合、変数 isAvailable に true が入るので、こちらの値によってアカウントを取得するか、エラーメッセージを表示するかを切り替えてください。
連携可能な場合は、4行目からの処理で Apple アカウントとアプリを連携し、アカウント情報を取得しています。
取得できる情報は下記の通りです。
こちらは GitHub にも掲載してありますので、そちらも参考にしてください。

{
  authorizedScopes: [],
  identityToken: 'identityToken',
  authorizationCode: 'authorizationCode',
  realUserStatus: 1,
  fullName: {
    namePrefix: null,
    givenName: null,
    nameSuffix: null,
    middleName: null,
    familyName: null,
    nickname: null
  },
  email: null,
  state: null,
  user: 'userId'
}

なお、実際に動作させてみて分かったのですが、この Apple アカウントのメールアドレスと名前の項目は、初回連携の時は取得できますが、2回目以降は取得できないようです。
なので、動作確認で 1回連携をしてしまうと、今後メールアドレスと名前の項目が取得できなくなるため、端末側の設定から連携を解除する必要がありました。
連携の解除方法については、下記の Apple の公式サイトを参考にしてください。

「Apple でサインイン」を使っている App を管理する – Apple サポート
https://support.apple.com/ja-jp/HT210426#stopusingappleid

最初、これを知らなかったので何か設定にミスがあるのかも…と悩みました。

以上、Cordova アプリで Apple アカウントとの連携機能を簡単に実装できるプラグイン「cordova-plugin-apple-login」のご紹介でした。
ご参考になれば幸いです。