📲

【React Native】iOSでのLINE自動ログインに失敗する件

2024/08/07に公開

はじめに

React Native(Expo)で開発しているネイティブアプリで、iOSだとLINEの自動ログインに失敗していたので調査・検証を行いました。

自動ログインが失敗するまでの挙動

  1. アプリの画面で「LINEでログイン」をクリック
  2. 内部ブラウザが開き、webサーバーにアクセス
  3. Laravel Socialite(OAuth認証を簡単に実装するためのLaravelパッケージ)を用いてLINEのログイン画面にリダイレクト(ここで自動ログインが試みられる
  4. iOSの場合、自動ログインが失敗してエラーメッセージが出ていた ※Androidだと成功する
    自動ログインが失敗したことによるエラーメッセージ

iOSで自動ログインが失敗する原因

おそらく、iOSのユニバーサルリンクがうまく動作していないためだと思われます。
LINEのドキュメントに以下のような記載があります。

外部ブラウザにおける自動ログインは、iOSのユニバーサルリンク (opens new window)やAndroidのアプリリンク (opens new window)の機能を利用しています。
外部ブラウザや特定のアプリ内のブラウザで、ユニバーサルリンクやアプリリンクが機能せず、自動ログインが動作しないことがあります。この場合、LINEアプリは起動せずメールアドレスログインの画面が外部ブラウザ上やアプリ内のブラウザ上で表示されます。これは、ユーザーが利用するOSの仕様によって起きる場合があります。OSの仕様は完全には公開されていないため、自動ログインに失敗する条件をLINEプラットフォームが回避することが難しい場合があります。

さらに、以下のような記述もあります。

以下のような場合、ユニバーサルリンクが動作しないことがあります。
・JavaScriptによるリダイレクトで、ユーザーを認可URLに遷移させる。
・ユーザーがURLを入力し、認可URLに直接遷移する。

https://developers.line.biz/ja/docs/line-login/how-to-handle-auto-login-failure

そもそもユニバーサルリンクとは

ウェブサイトのリンクをタップすると、対応するアプリを直接開くことができる機能のことです。もしアプリがインストールされていない場合は、通常のウェブページとしてブラウザで開きます。

対応策

このような感じでユニバーサルリンクの設定をきちんとしてあげればLINE自動ログインも成功するのではと思いますが、実際に試す余力がなかったのでもしうまく行った方がいれば教えていただきたいです…
https://zenn.dev/manalink_dev/articles/manalink-expo-universal-links

実際に行った対応

LIFFでログイン実装してみるなど、いろいろ試してはみたのですが、結局ユニバーサルリンクが動作しないことにはLINEアプリが立ち上がらず、自動ログインも成功しません。
泣く泣くiOSでのLINE自動ログインは諦めることにしましたが、このままでは毎回自動ログインが失敗したことによるエラーが表示されるので、iOSの場合はSocialiteのオプションパラメータに「disable_auto_login=true」を付与して、自動ログインを無効にするようにしました。
https://developers.line.biz/ja/docs/line-login/how-to-handle-auto-login-failure/#when-automatic-login-fails

そのうち手が空いたらユニバーサルリンクの設定をしてLINE自動ログインが成功するのか検証したいと思います。
ここまで読んでくれた方がいればありがとうございましたm(__)m

Discussion