React NativeでMastodon認証を実装した
Mastodonnのクラインアント用ネイティブアプリをReact NativeとExpoで作成している。 バージョンは下記の通り。 "expo": "~52.0.11", "react-native": "0.76.3", 実装自体はできたんだけれど、正直いろいろと理解が足りていないので、整理してみる。 インストールしたPackage "expo-auth-session": "^6.0.1", "expo-secure-store": "^14.0.0" expo-auth-session ブラウザベースの認証を処理するための API 最初は認証時にWebViewを開いて認証に成功したらリダイレクトURIを用いてアプリ画面に戻すという仕組みを実装しようとしたんだけれど、そもそもリダイレクトURIがわからない。Expoの開発用URLを指定してみたけど、 java.io.IOException: Remote update request not successful という謎のエラーが出てアプリ側に戻らない。 そしてタスク管理でアプリに戻ると認証が成功しているという謎の現象が発生した。 色々悩んでいたけどexpo-auth-session を使用したらリダイレクトURIの作成をいい感じにやってくれた。 Expo AuthSessionにはexpo-crypto と一緒にインストールする必要があるって書いてあったけど、インストールしていない。今のところ問題はないので気にしないでおく。 expo-secure-store Expo SecureStore Expo用のローカルストレージ。 // 保存 await SecureStore.setItemAsync("key", value); // 参照 await SecureStore.getItemAsync("key"); // 削除 await SecureStore.deleteItemAsync("kye"); で、一通りの作業ができる。 認証に用いたMastodon API ${instanceUrl}/api/v1/apps クライアント アプリケーションを登録 ${instanceUrl}/oauth/authorize? OAuth トークンを生成および管理 ${instanceUrl}/oauth/token API 呼び出し中に使用するアクセス トークンを取得 認証までのフロー アプリケーションを登録 クライアント アプリケーションを登録APIを叩く。 Bodyにclient_name、redirect_uris、scopes、websiteが必要になる。 client_nameはアプリ名を指定し、redirect_urisはexpo-auth-sessionを使用し作成する。 redirect_uris: AuthSession.makeRedirectUri({ native: "{APPNAME}://redirect", }), scopesは権限を指定し、websiteはアプリのウェブサイトをインプットする。...