NetlifyCMSのOAuth認証、Githubで失敗する件を解決した

2020-05-19

(LastUpdated: 2020-05-19)

このサイトでは、NetlifyCMSを利用しています。

このNetlifyCMSでの問題点。 githubでの認証からログインが、なんとなくうまくいかない・・・ うまくログインできている時もあって、なんか納得いかないなぁと思っていたので、ここで整理してみました。

最終的にやりたいことは、公開ドメインでアクセスを行い、githubでの認証を成功させることです。

  1. 今、できていないこと
  2. GitHubでの認証が、ローカルホストでしか機能しない
  3. GithubのOAuthにNetlifyCMSアプリを登録することで解決できる

今、できていないこと

  1. Gitgatewayの設定でGithubへの認証がなぜかうまくいかない。
  2. GitHubでの認証が、ローカルホストでしか機能しない

1は解決策が見つからず・・・ Gitgatewayではgithubの認証はうまくいかないのだろうか・・・

まずは成功させるために、公式のドキュメントにもある、「Githubのみの認証」に絞って進めることにしました。

GitHubでの認証が、ローカルホストでしか機能しない

なぜか、認証がローカルホストでしかうまくいかない。 公開されたアドレスにアクセスすると、以下のようなメッセージが表示されてしまう。

netlifyの認証エラーの画像

No Auth Provider Found
Make sure you've configured the API credentials for Github from the Access part of your Netlify site dashboard.

GithubのOAuthにNetlifyCMSアプリを登録することで解決できる

以下のドキュメントをもとに、認証設定を追加した。 Use OAuth provider tokens on your site | Netlify Docs

githubのOAuthアプリケーション追加

githubにアクセスをして、SettingsのOauth Applicationsの設定を行います。 設定値などについては、上記のドキュメントを参照してください。

NetlifyのAuthentication Providersにgithubを設定

次は、Netlifyにアクセスをします。 Settings > Access control > OAuth この設定画面で、OAuthプロバイダーにgithubをインストールします。 こちらも、上記ドキュメントを参照の上、設定をしていってください。

これで、無事にログインできるようになりました。


タグに関連づけられた記事

AM2

JAMstacなブログにまつわる、技術的なことなどを記録しています。