SwiftUIアプリにLINEログインを追加、ユーザープロファイル情報の取得(.onOpenURLモディファイアを使用)
この記事では、SwiftUIアプリでLineログインを統合し、ログイン成功時にユーザーのプロファイル情報を取得することについて説明します。
![SwiftUIアプリにLINEログインを追加、ユーザープロファイル情報の取得(.onOpenURLモディファイアを使用)](../../../../content/images/size/w2000/2024/07/swiftui-line.png)
この記事では、SwiftUIアプリでLineログインを統合し、ログイン成功時にユーザーのプロファイル情報を取得することについて説明します。
私は新しいChatGPT iOSアプリ(興味があれば私のTwitterをチェックしてください)でLineログイン機能を実装していたのですが、SwiftUIアプリ用のインストラクションがないことを発見しました。そこで、この記事を書きました。
![](https://mszpro.com/content/images/2023/03/https---qiita-image-store.s3.ap-northeast-1.amazonaws.com-0-635330-e54b687e-6152-8361-6758-732859794bfb.png.webp)
SwiftUIアプリとは
認証に成功した後、
LineはアプリのカスタムURLスキーマを呼び出し、
認証トークンの情報を提供します。
SwiftUIアプリでは、onOpenURL
モディファイアがあり、
ユーザーがLineで認証した後のログイン結果を処理するために使用することができます。
アプリの登録
まず、LINEのデベロッパーサイトにアクセスし、アプリケーションを登録します。
まず、プロバイダを作成します。
これは会社名でも自分の名前でもかまいません。
プロバイダーは複数のチャンネル(アプリケーション)を含むことができます。
![](https://mszpro.com/content/images/2023/03/https---qiita-image-store.s3.ap-northeast-1.amazonaws.com-0-635330-975c1732-f6e2-3c43-56a0-9b154f216a5a.png.webp)
次に、作成したプロバイダーをクリックし、アプリケーション(チャネル)を作成します。
種類は、"LINEログイン"を選択します。
![](https://mszpro.com/content/images/2023/03/https---qiita-image-store.s3.ap-northeast-1.amazonaws.com-0-635330-0fd294d7-95ea-6dcd-739c-45d3f21a9da5.png.webp)
新しいチャンネルのフォームで、
情報を入力します。
"アプリの種類"で、"ネイティブアプリ "をトグルします。
![](https://mszpro.com/content/images/2023/03/https---qiita-image-store.s3.ap-northeast-1.amazonaws.com-0-635330-6e562954-0cde-56b7-1bb3-875383618b88.png.webp)
リストに自分のチャンネルが表示されるので、クリックして開きます。
![](https://mszpro.com/content/images/2023/03/https---qiita-image-store.s3.ap-northeast-1.amazonaws.com-0-635330-ef2a5dc7-46eb-630c-ce85-280993b1ce12.png.webp)
「LINEログイン設定」にて、iOSアプリケーションのバンドルIDを入力します。
![](https://mszpro.com/content/images/2023/03/https---qiita-image-store.s3.ap-northeast-1.amazonaws.com-0-635330-6e38b3cf-fe79-3d94-3c86-de6cd8948baf.png.webp)
![](https://mszpro.com/content/images/2023/03/https---qiita-image-store.s3.ap-northeast-1.amazonaws.com-0-635330-1e4f15aa-c15e-ad84-329e-d728abbe4587.png.webp)
ここで、「チャンネル基本設定」タブにある チャンネルID
を覚えておきましょう
![](https://mszpro.com/content/images/2023/03/https---qiita-image-store.s3.ap-northeast-1.amazonaws.com-0-635330-e7975084-4447-649f-b367-32bf4ceae3ba.png.webp)
また、チャンネルを公開とマークすることを確認してください。
SDKを統合
LineSDK
はSwift Packageを使用しても配布されています。
プロジェクトに追加するには、Xcodeの「File」メニューをタップし、「Add Packages」をクリックしてください。以下のURLを入力します:
https://github.com/line/line-sdk-ios-swift.git
![](https://mszpro.com/content/images/2023/03/https---qiita-image-store.s3.ap-northeast-1.amazonaws.com-0-635330-9a27c4c8-9548-60db-a511-1a34e071d56e.png.webp)
そして、「LineSDK」にチェックを入れ、メインとなるiOSターゲットを選択し、フレームワークを追加します。
![](https://mszpro.com/content/images/2023/03/https---qiita-image-store.s3.ap-northeast-1.amazonaws.com-0-635330-0bab3195-1ba1-51a6-47a3-05d2646bb776.png.webp)
URLタイプの追加
ユーザーがLINEで認証されると、LINEはURLスキーマを使ってあなたのアプリを呼び出します。そのURLスキーマを定義する必要があります。
プロジェクトファイルを開き、iOSアプリのターゲットを選択し、Info
タブで、以下のURLスキーマを追加します。
line3rdp.$(PRODUCT_BUNDLE_IDENTIFIER)
:
![](https://mszpro.com/content/images/2023/03/https---qiita-image-store.s3.ap-northeast-1.amazonaws.com-0-635330-d1ad7b34-4596-6b41-1f90-d15a9d72b66e.png.webp)
SDKの初期化
SwiftUIアプリのファイル(@mainがあるファイル)内で、
SDKをインポートし、
アプリ起動時にLine SDKを初期化するためのAppDelegateアダプタを追加します。
channelID
には、チャンネルページのチャンネルIDです。
認証結果の処理
SwiftUIアプリの場合、
認証結果を処理するためにonOpenURL
を使用する必要があります。
SwiftUIアプリのファイルに、
ログインを処理するコードを追加します:
SwiftUI ビューにログインボタンを追加する
ログインの状態を監視するために、observed
オブジェクトを使用することにします。
ここでの値は、ログインボタンを表示するビューに伝え返されます。
また、より多くの情報を含むカスタム構造体を使用することもできます。
まず、SwiftUIでUIKit Lineログインボタンを表示するための互換ビューを作成する必要があります:
![](https://mszpro.com/content/images/2023/03/https---qiita-image-store.s3.ap-northeast-1.amazonaws.com-0-635330-9c1002c6-fd2c-c9b0-3942-e0b710baf53a.png.webp)
ログインボタンを表示するビューにログインの状態を報告するために、LineLoginStatus
を使用しています。
その中で、@Published
変数を使用し、
これらの変数値の変更によってビューを更新します
(そして.onChangeビューモディファイアを呼び出します)。
SwiftUIビューにLINEのログインボタンを追加する
さて、SwiftUIのビューにボタンを追加することができます:
onChange`ビューモディファイアを使って、ユーザーIDの変更(サインイン成功時)とエラーメッセージ(エラー時)を監視しています。
これで、このアプリを実行し、ユーザーがログインに成功したときにユーザーIDを確認することができます。
お読みいただきありがとうございました。
☺️ サイト https://MszPro.com
![](https://mszpro.com/content/images/2023/03/https---qiita-image-store-1.s3.ap-northeast-1.amazonaws.com-0-635330-640938e9-c121-8152-b8c4-8ab63124afcc.png.webp)
Written by MszPro~