[ReactNative] Sign In with AppleをAppleAuthenticationで実装してみた

7894 ワード
expo reactnative SignInWithApple reactnative テキストリンク

What

話題のSign In with AppleをexpoのAppleAuthenticationを使って実装してみました。
実装自体は非常に簡単で、AppleAuthenticationから必要な関数を持ってくるだけです。
ただ、本番運用をするにはAPIドキュメントの手順にしたがって設定をする必要があります。

以下は、ボタンを独自実装してみたサンプルです（通常のボタンだと、高さと横幅と角の丸みくらいしかいじれません）


import * as AppleAuthentication from "expo-apple-authentication";

function AppleSignInButton() {
  return (
    <TouchableOpacity
      onPress={async () => {
        try {
          const credential = await AppleAuthentication.signInAsync({
            requestedScopes: [
              AppleAuthentication.AppleAuthenticationScope.FULL_NAME,
              AppleAuthentication.AppleAuthenticationScope.EMAIL
            ]
          });
          // 認証情報が返される
          console.log(credential);
        } catch (e) {
          if (e.code === "ERR_CANCELED") {
            console.warn(e);
          } else {
            console.warn(e);
          }
        }
      }}
      style={{
        marginVertical: 7.5,
        height: 40,
        backgroundColor: "black",
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
        borderRadius: 23,
        position: "relative"
      }}
      underlayColor={"white"}
      activeOpacity={0.2}
    >
      <Image
        source={require("../../assets/images/apple.png")}
        style={{
          height: 21,
          width: 18,
          position: "absolute",
          left: 16
        }}
      />
      <Text
        style={{
          fontSize: 16,
          fontWeight: "bold",
          color: "white",
          fontWeight: "bold"
        }}
      >
        Apple IDで登録
      </Text>
    </TouchableOpacity>
  );
}

認証成功時に返却されるJSONデータ

Object {
  "authorizationCode": "一時的なセッショントークン",
  "email": "ユーザのemail。ユーザはemailを隠す事ができ、その場合はランダムな文字列のemailが生成される",
  "fullName": Object {
    "familyName": "hoge",
    "givenName": "fuga",
    "middleName": null,
    "namePrefix": null,
    "nameSuffix": null,
    "nickname": null,
  },
  "identityToken": "string型のJWT",
  "realUserStatus": 1,
  "state": null,
  "user": "アプリごとにuserが持つstrig型の識別子、ログインの確認などに使える",
}
シロに関する知識点
NSString関連アクション