NetlifyのIdentifyでGoogle認証を断念!

公開:2020/12/28
更新:2020/12/28
2 min読了の目安(約2100字TECH技術記事

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のIdentifyで外部プロバイダ認証を使う場合はUpgradeが必要

結論は書いてしまったのですが、どのような状態になるのか参考までに。

サンプルをダウンロードしてログイン画面を実装する

まずは、netlify-identity-widgetを利用して認証のコントロールをしているアプリをダウンロードします。
Vueのサンプルを使いました。

https://github.com/whizjs/netlify-identity-demo-vue

netlify-identity-widget は以下になります。
ウィジェットの使い方は下記のREADMEが参考になります。

https://github.com/netlify/netlify-identity-widget

メールアドレス登録なら認証後にLoginする


Demo初期画面

SignUpしたメールアドレスとパスワードでログインします。


ログイン画面

ログインに成功すれば、自動的に下の画面になります。
登録した名前が Hello の後に表示され、ボタンが「Log Out」に変わります。

Protected Page にもアクセス可能です。


ログイン状態

Google認証の場合Loginするがアプリで認証出来ない

Googleで認証するボタンを押します。


Googleで認証する

ログインしたことはわかるのですが、先程メールでログイン後に遷移する画面には遷移しません。
ダイアログが開いたままとなります。


GoogleでLogin済になるもログイン成功した画面に遷移しない

Google認証でアプリも認証状態にするには課金が必要

というわけで、Google認証も使えるようにするには、Upgrade が必要という話でした。

素直にfirebaseの認証を使うのが良いかも。