Use Spotify Sign In with Firebase
https://github.com/firebase/functions-samples/tree/master/spotify-auth
をやってみた
環境
- Windows10
- PowerShell
- Visual Studio Code
作業フォルダ作成
適当な場所にgithubの内容をコピー
https://github.com/firebase/functions-samples
Cloud Functionsの初期化
Prerequisites
To learn how to get started with Cloud Functions for Firebase by having a look at our Getting Started Guide, trying the quickstart samples and looking at the documentation.
まずこれ読めとあるのでやっていく
https://firebase.google.com/docs/functions/get-started
Firebaseでプロジェクトを作成した（割愛）
PSC:\>npminstall-gfirebase-toolsPSC:\>firebaseloginAlreadyloggedinasXXXPSC:\>firebaseinitfunctionsこの時に、Firebaseで作成したプロジェクトを選択する
Enable Billing on your Firebase project by switching to the Blaze or Flame plan, this is currently needed to be able to perform HTTP requests to external services from a Cloud Function. See the pricing page for more details.
function で外部URLへリクエストを投げるため、ライセンスを変更する。
Googleサービスアカウントの作成
https://firebase.google.com/docs/admin/setup#add_firebase_to_your_app
サービス アカウント用の秘密鍵ファイルを生成するには:
1.Firebase コンソールで、[設定] > [サービス アカウント] を開きます。
2.[新しい秘密鍵の生成] をクリックし、[キーを生成] をクリックして確定します。
3.キーを含む JSON ファイルを安全に保管します。
ダウンロードしたJSONファイルを./functions/service-account.jsonに保存する
Spotify側でアプリ登録
Create a Spotify app in the Spotify Developers website.
登録する
Add the URL https://.firebaseapp.com/popup.html to the Redirect URIs of your Spotify app.
このタイミングでは何のことかわからなかったので、適当に登録する
Copy the Client ID and Client Secret of your Spotify app and use them to set the spotify.client_id and spotify.client_secret Google Cloud environment variables. For this use:
クライアントID、クライアントシークレットを取得して、firebaseに登録する
PSC:\>firebasefunctions:config:setspotify.client_id="XXX"spotify.client_secret="XXX"+Functionsconfigupdated.Pleasedeployyourfunctionsforthechangetotakeeffectbyrunningfirebasedeploy--onlyfunctionsDeploy
上で、firebase deploy --only functionsと出たのでやる
PSC:\>firebasedeploy--onlyfunctions===Deployingto'xxx-xxx'...ideployingfunctionsRunningcommand:npm--prefix"$RESOURCE_DIR"runlint>xxx-functions@lintC:\xxx\functions>eslint--max-warnings=0.+functions:Finishedrunningpredeployscript.ifunctions:ensuringrequiredAPIcloudfunctions.googleapis.comisenabled...+functions:requiredAPIcloudfunctions.googleapis.comisenabledifunctions:preparingfunctionsdirectoryforuploading...ifunctions:packagedfunctions(47.52KB)foruploading+functions:functionsfolderuploadedsuccessfullyifunctions:creatingNode.js8functionredirect(us-central1)...ifunctions:creatingNode.js8functiontoken(us-central1)...+functions[redirect(us-central1)]:Successfulcreateoperation.FunctionURL(redirect):https://us-central1-xxx.cloudfunctions.net/redirect+functions[token(us-central1)]:Successfulcreateoperation.FunctionURL(token):https://us-central1-xxx.cloudfunctions.net/token+Deploycomplete!ProjectConsole:https://console.firebase.google.com/project/xxx/overview??? 何が起きたかよくわからなかった。
Run firebase deploy to effectively deploy the sample. The first time the Functions are deployed the process can take several minutes.
とあったので、今度は、firebase deployを実行する。
→エラー、firebase databaseあたりのエラー
firebase WEBコンソールから、firebase database を有効にする
firebase deployを再実行する
PSC:\>firebasedeploy===Deployingto'xxx-xxx'...ideployingdatabase,functions,hostingRunningcommand:npm--prefix"$RESOURCE_DIR"runlint>xxx-functions@lintC:\xxx\functions>eslint--max-warnings=0.+functions:Finishedrunningpredeployscript.idatabase:checkingrulessyntax...+database:rulessyntaxfordatabasexxx-xxxisvalidifunctions:ensuringrequiredAPIcloudfunctions.googleapis.comisenabled...+functions:requiredAPIcloudfunctions.googleapis.comisenabledifunctions:preparingfunctionsdirectoryforuploading...ifunctions:packagedfunctions(47.52KB)foruploading+functions:functionsfolderuploadedsuccessfullyihosting[xxx-xxx]:beginningdeploy...ihosting[xxx-xxx]:found6filesinpublic+hosting[xxx-xxx]:fileuploadcompleteidatabase:releasingrules...+database:rulesfordatabasexxx-xxxreleasedsuccessfullyifunctions:updatingNode.js8functionredirect(us-central1)...ifunctions:updatingNode.js8functiontoken(us-central1)...+functions[redirect(us-central1)]:Successfulupdateoperation.+functions[token(us-central1)]:Successfulupdateoperation.ihosting[xxx-xxx]:finalizingversion...+hosting[xxx-xxx]:versionfinalizedihosting[xxx-xxx]:releasingnewversion...+hosting[xxx-xxx]:releasecomplete+Deploycomplete!ProjectConsole:https://console.firebase.google.com/project/xxx-xxx/overviewHostingURL:https://xxx-xxx.web.app動作確認 １
https://xxx-xxx.web.appにアクセスしてみる。表示される。
Spotifyでログインする。エラーで止まる。。。
エラー内容
TypeError: Cannot read property 'url' of undefined
at Spotify.getMe (/srv/index.js:88:59)
spotify APIを実行した結果を処理する部分でエラーが発生している様子
https://developer.spotify.com/console/get-current-user/
spotifyでAPIを実行して、結果が確認できる（上のURLで）ので、内容を確認すると、imagesがカラ
"images": [],
しかし、コード部分の記述はこう
constprofilePic=userResults.body['images'][0]['url'];なのでこうした。
未定義の場合をカラ文字とした場合、別の場所でエラーが発生したので、画像のURLを適当に充てることにした
constprofilePic=userResults.body['images'][0]?userResults.body['images'][0]['url']:'https://placehold.jp/50x50.png';これでエラーは出なくなった。
しかし、ログイン済みの画面に切り替わらない。。。
動作確認 2
ログイン済みの画面に切り替わらない問題の解決
firebase hostingでは、二つのホスト名が割り当てられます
- プロジェクト名.web.app
- プロジェクト名.firebaseapp.com
どちらのホスト名でも動作するのですが、デプロイ後に表示されるメッセージは、https://xxx-xxx.web.appとなっており、そのホスト名で動作確認を行っていたことが原因でした。
Spotify側に登録したリダイレクトURIと同じホスト名を使って動作確認する必要がありました。
（おそらくCookieの影響範囲あたりの問題だったと思う）
動作確認 3
ログアウト。
Firebase側のアプリのログアウトはできました。
再度ログインでSpotifyへリダイレクトされると、Spotiry側はログイン済みで、Firebase側へ戻ってきました。
OAuthの手続きとしてはそういうものかなーと、今のところ思ってます。