現在JavaScriptの設定が無効になっています。このページを利用するにはJavaScriptの設定を有効にしてください。2018の16日目の記事です。一覧はこちらこんにちは。IDソリューション本部の都筑(@kazuki229_dev)です。ID連携のサーバーサイド、iOSのSDKの開発などを担当しています。ID連携を行う方法を考えてみたいと思います。Flutterとは?Flutterとは、単一のコードでiOSとAndroidのネーティブアプリを開発できる、クロスプラットフォームのフレームワークです。ホットリロード機能によって高速な開発が可能になり、独自のレンダー実装により高速な描画、柔軟なデザインを実現可能とし、ネーティブとほぼ変わらないパフォーマンスを出せるそうです。FlutterはGoogleによって開発されており、開発言語はDart言語となっています。Service)です。Firebaseにはモバイルアプリ開発を手助けする便利な機能がたくさんあります。Authenticationというものを利用します。Authenticationはその名の通り、ユーザーの認証に関する機能を提供しています。プロバイダーとのID連携も行うことが可能です。プロバイダーはGoogle、Facebook、Twitter、Githubの4種類です。Authenticationを利用することによって、開発者が独自に認証基盤を構築する必要がなく、パスワードや電話番号など取り扱いが難しいサービス利用者の情報を自身で管理せずに済みます。プロバイダーとのID連携を採用することで、自サービスのためのパスワードを新たにユーザーが覚えることなく、多くのユーザーが利用している各プロバイダーのIDを利用することが可能となるため、モバイルアプリのUX向上にもつながります。プロバイダーではありません。プロバイダーとID連携するための仕組みがあります。プロバイダーのことを今回はカスタム認証システムと本記事では定義します。IDとの連携を実装してみたいと思います。Tokenを直接Firebaseにわたして認証できます。Tokenを直接Firebaseにわたしての認証はできません。TokenというTokenを利用します。Token(以下JWTと記載します)の形式となっています。Tokenを使ってFirebaseにログインします。Tokenを用いたログイン方法については後ほど記載します。ID連携を利用したFirebase認証を実装していきます。今回は下記のようなフローで実装を進めます。実装に入る前に、必要な準備をまとめます。ID連携の機能を利用するためには、Yahoo!デベロッパーネットワークでアプリケーションを登録する必要があります。登録手順はYahoo!デベロッパーネットワークに記載しておりますので、そちらをご参照ください。IDとシークレットが発行されます。この時点でコールバックURLも登録をしておきます。Functionsを利用します。Functionsの処理内で外部のAPIへのリクエストをする場合には有料版のプランを選択しなければならないのでご注意ください。IDとシークレット、コールバックURLをFirebaseの環境変数から取得できるように事前に設定しておきます。ID連携を実装していきたいと思います。Connectの仕様に準拠しています。したがって、標準仕様に従って実装されているOSSクライアントライブラリを利用することが可能です。Connectのクライアントライブラリがありましたが、今回はAppAuthというライブラリを利用したいと思います。2.0実装のベストプラクティスがRFC8252でまとめられています。このベストプラクティスに沿って実装されたOSSのクライアントライブラリがAppAuthです。AppAuthにはiOSとAndroidのライブラリが提供されています。AppAuth-iOSAppAuth-Androidこのベストプラクティスでは下記のような実装方法が推奨されています。アプリ内ブラウザタブの利用などは、特にiOSの場合はOSバージョンによって実装方法が異なるため広範囲のバージョンをサポートする場合などに実装が煩雑になります。ConnectやOAuthの導入先のクライアントのこと。RP)を実装する場合はAppAuthの利用を検討してみると良いかと思います。今回はFlutterの実装ですが、FlutterにはiOS・Androidのネーティブの処理を呼び出す機能があるためそちらを利用して、このAppAuthの処理を呼び出します。channelsという機能があります。Codeの取得まで実装してみたいと思います。Codeを返却します。Flutterのクラスとして、まずAuthLibというクラスを定義します。このクラスにfetchAuthorizationCodeというメソッドを定義し、その中でinvokeMethodにfetchAuthorizationCodeという文字列をわたしてを呼び出します。この処理により、各プラットフォームのコードが呼び出されます。}}iOSの場合iOSの場合は、すでに存在するAppDelegate.swiftに処理を追加していきます。Flutter側でinvokeMethodを呼び出すと、application:didFinishLaunchingWithOptions:の中のFlutterMethodChannelのsetMethodCallHandlerのコールバックが呼び出されます。この中で指定されたメソッド名ごとに処理を分岐させます。今回はfetchAuthorizationCodeが呼び出されたら自身のfetchAuthorizationCodeを呼び出します。Codeを取得します。Configurationエンドポイントにリクエストし、各エンドポイントのURIやサポート機能を確認します。Codeフローでリクエストを行うため、responseTypeの引数にOIDResponseTypeCodeを指定します。Codeが返却されるので、これをFlutterResultの引数にわたして呼び出します。Codeがわたります。}}Androidの場合Androidも同様に実装していきます。Androidの場合はMainActivityに実装を行います。Codeを取得しFlutterに処理を戻します。Codeを取得することができました。今の所ほとんどFlutterを書いていません。Tokenを発行するまでの実装を行います。今回はNode.jsとTypeScriptを用いて実装を行いました。流れとしては以下です。ID連携のTokenリクエストを行います。HTTPClientにはRequest-Promiseを利用します。Tokenを取得できました。Tokenの認証結果を受け入れる際には定められた方法で検証を行います。Calendarの記事を参照ください。Tokenの検証は下記のように行います。今回はJWTの検証等についてはOSSのJWTライブラリであるnode-jsonwebtokenを利用します。Tokenを受け入れます。Tokenの発行を行います。Tokenの発行方法を元に実装を行います。Tokenの発行方法は下記の3つ紹介されています。Token発行手順を実装してください。SDKにサービスアカウントを検出させる方法で実装してみたいと思います。ユーザー情報を取得します。Firebaseではuidというユーザー識別子を利用しますが、他の手段で生成したユーザーのuidとの重複を避けるためyahoojapanのprefixをつけています。この時指定したuidが未登録であればFirebase上に新規登録されます。Tokenを発行するときはユーザーのuidのみを指定します。Tokenの発行が完了です。Tokenを取得します。Tokenを受け入れるために検証を行います。FirebaseをFlutter上で利用する方法はFirebaseの公式ドキュメントで丁寧に説明されているので、そちらをご参照ください。customToken);以上でFirebaseにログインできました。ID連携を実装する方法をご紹介しました。ID連携をよろしくお願いします。JAPANでは情報技術を駆使して人々や社会の課題を一緒に解決していける方を募集しています。詳しくは採用情報をご覧ください。JAPANのサービス開発を支える技術やデザイン、文化を発信しています。Reserved.このページの先頭へ。