NetlifyのIdentifyでGoogle認証を断念!
NetlifyのIdentifyが便利そうなので使ってみたがGoogle認証が使えない?
Netlifyのホスティングには日頃からお世話になっており、大いに感謝しております。
最近その機能でIdentifyという機能があり、メールアドレスによる認証の他に、googleやgithubなどのOAuth認証に対応している。
それに、ログイン／サインインのためのパネルnetlify-identity-widgetもあるよ〜 ということで、簡単に認証部分が実装出来そうなので試してみました。
結論
netlify-identity-widget を利用する場合
名前・メールアドレス・パスワードをNetlifyに登録すれば、email確認用のメールが送付され、そのメールでアドレスを確認すれば、Identifyに登録されます。
メールアドレスでログインすると、アプリ側までログインした状態が渡って来ます。
ところが、GoogleなどのOAuthの場合はwidgetで各認証プロバイダの認証までは行くけど、アプリ側ではログイン状態になりませんでした。
原因
Upgradeが必要ということです。残念。1サイトあたり $99/月 です。
Branded external OAuth integration: If you enable external provider login, you have the option to use our default configuration, or upgrade levels to customize login using your own app credentials.
結論は書いてしまったのですが、どのような状態になるのか参考までに。
サンプルをダウンロードしてログイン画面を実装する
まずは、netlify-identity-widgetを利用して認証のコントロールをしているアプリをダウンロードします。
Vueのサンプルを使いました。
netlify-identity-widget は以下になります。
ウィジェットの使い方は下記のREADMEが参考になります。
メールアドレス登録なら認証後にLoginする
Demo初期画面
SignUpしたメールアドレスとパスワードでログインします。
ログイン画面
ログインに成功すれば、自動的に下の画面になります。
登録した名前が Hello の後に表示され、ボタンが「Log Out」に変わります。
Protected Page にもアクセス可能です。
ログイン状態
Google認証の場合Loginするがアプリで認証出来ない
Googleで認証するボタンを押します。
Googleで認証する
ログインしたことはわかるのですが、先程メールでログイン後に遷移する画面には遷移しません。
ダイアログが開いたままとなります。
GoogleでLogin済になるもログイン成功した画面に遷移しない
Google認証でアプリも認証状態にするには課金が必要
というわけで、Google認証も使えるようにするには、Upgrade が必要という話でした。
素直にfirebaseの認証を使うのが良いかも。
Discussion