<h2 id="%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB">
<a class="header-anchor-link" href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> はじめに</h2>
<p>個人開発でGoogleログイン機能を実装するにあたり、OAuth認証に必要な「クライアントID」と「クライアントシークレット」を取得する必要がありましたので、取得手順を紹介します。</p>
<h2 id="%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%9F%E8%AA%8D%E8%A8%BC%E6%A9%9F%E8%83%BD(nextauth.js)">
<a class="header-anchor-link" href="#%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%9F%E8%AA%8D%E8%A8%BC%E6%A9%9F%E8%83%BD(nextauth.js)" aria-hidden="true"></a> 使用した認証機能(NextAuth.js)</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__4d0909a3eeb78" src="https://embed.zenn.studio/card#zenn-embedded__4d0909a3eeb78" data-content="https%3A%2F%2Fnext-auth.js.org%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://next-auth.js.org/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://next-auth.js.org/</a></p>
<p>Next.jsでNextAuth.jsを使用したログイン認証機能の作成に関しては以下の記事で紹介しています。<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__0bd7418a06baa" src="https://embed.zenn.studio/card#zenn-embedded__0bd7418a06baa" data-content="https%3A%2F%2Fzenn.dev%2Faya1357%2Farticles%2F029c3bf2c1bba4" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zenn.dev/aya1357/articles/029c3bf2c1bba4" style="display:none" target="_blank">https://zenn.dev/aya1357/articles/029c3bf2c1bba4</a></p>
<h2 id="1.-%E3%82%B3%E3%83%B3%E3%82%BD%E3%83%BC%E3%83%AB%E7%94%BB%E9%9D%A2%E3%81%AB%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%81%97%E3%81%BE%E3%81%99%E3%80%82">
<a class="header-anchor-link" href="#1.-%E3%82%B3%E3%83%B3%E3%82%BD%E3%83%BC%E3%83%AB%E7%94%BB%E9%9D%A2%E3%81%AB%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B9%E3%81%97%E3%81%BE%E3%81%99%E3%80%82" aria-hidden="true"></a> 1. コンソール画面にアクセスします。</h2>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__32d514e816ff5" src="https://embed.zenn.studio/card#zenn-embedded__32d514e816ff5" data-content="https%3A%2F%2Fconsole.cloud.google.com%2Fapis%2Fdashboard%3Fproject%3Dapp-ai-426413" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://console.cloud.google.com/apis/dashboard?project=app-ai-426413" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://console.cloud.google.com/apis/dashboard?project=app-ai-426413</a></p>
<h2 id="2.-api%E3%81%A8%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9(%E3%82%B5%E3%82%A4%E3%83%89%E3%83%90%E3%83%BC)%E3%81%AEoauth%E5%90%8C%E6%84%8F%E7%94%BB%E9%9D%A2%E3%82%92%E9%81%B8%E6%8A%9E%E3%81%97%E3%81%A6%E3%80%81%E3%82%A2%E3%83%97%E3%83%AA%E5%90%8D%E3%80%81%E3%83%A1%E3%83%BC%E3%83%AB%E3%82%A2%E3%83%89%E3%83%AC%E3%82%B9%E3%82%92%E5%85%A5%E5%8A%9B%E3%81%97%E3%81%A6%E3%80%81%E4%BF%9D%E5%AD%98%E3%81%97%E3%81%A6%E6%AC%A1%E3%81%B8%E3%82%92%E9%81%B8%E6%8A%9E%E3%81%97%E3%81%BE%E3%81%99%E3%80%82">
<a class="header-anchor-link" href="#2.-api%E3%81%A8%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9(%E3%82%B5%E3%82%A4%E3%83%89%E3%83%90%E3%83%BC)%E3%81%AEoauth%E5%90%8C%E6%84%8F%E7%94%BB%E9%9D%A2%E3%82%92%E9%81%B8%E6%8A%9E%E3%81%97%E3%81%A6%E3%80%81%E3%82%A2%E3%83%97%E3%83%AA%E5%90%8D%E3%80%81%E3%83%A1%E3%83%BC%E3%83%AB%E3%82%A2%E3%83%89%E3%83%AC%E3%82%B9%E3%82%92%E5%85%A5%E5%8A%9B%E3%81%97%E3%81%A6%E3%80%81%E4%BF%9D%E5%AD%98%E3%81%97%E3%81%A6%E6%AC%A1%E3%81%B8%E3%82%92%E9%81%B8%E6%8A%9E%E3%81%97%E3%81%BE%E3%81%99%E3%80%82" aria-hidden="true"></a> 2. APIとサービス(サイドバー)のOAuth同意画面を選択して、アプリ名、メールアドレスを入力して、保存して次へを選択します。</h2>
<p><a href="https://gyazo.com/11e7f491ee83b632c0b0d9e810ead02a" target="_blank" rel="nofollow noopener noreferrer"><img src="https://i.gyazo.com/11e7f491ee83b632c0b0d9e810ead02a.png" alt="Image from Gyazo" loading="lazy" class="md-img"></a></p>
<h2 id="3.-%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%97%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%BE%E3%81%9F%E3%81%AF%E5%89%8A%E9%99%A4%E3%82%92%E9%81%B8%E6%8A%9E%E3%80%81google%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%81%AE%E3%83%A1%E3%82%A4%E3%83%B3%E3%81%AE%E3%83%A1%E3%83%BC%E3%83%AB%E3%82%A2%E3%83%89%E3%83%AC%E3%82%B9%E3%81%AE%E5%8F%82%E7%85%A7%E3%82%92%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF%E3%81%97%E3%81%A6%E6%9B%B4%E6%96%B0%E3%81%97%E3%81%9F%E5%BE%8C%E3%80%81%E4%BF%9D%E5%AD%98%E3%81%97%E3%81%A6%E6%AC%A1%E3%81%B8%E3%82%92%E9%81%B8%E6%8A%9E%E3%81%97%E3%81%BE%E3%81%99%E3%80%82">
<a class="header-anchor-link" href="#3.-%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%97%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%BE%E3%81%9F%E3%81%AF%E5%89%8A%E9%99%A4%E3%82%92%E9%81%B8%E6%8A%9E%E3%80%81google%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%81%AE%E3%83%A1%E3%82%A4%E3%83%B3%E3%81%AE%E3%83%A1%E3%83%BC%E3%83%AB%E3%82%A2%E3%83%89%E3%83%AC%E3%82%B9%E3%81%AE%E5%8F%82%E7%85%A7%E3%82%92%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF%E3%81%97%E3%81%A6%E6%9B%B4%E6%96%B0%E3%81%97%E3%81%9F%E5%BE%8C%E3%80%81%E4%BF%9D%E5%AD%98%E3%81%97%E3%81%A6%E6%AC%A1%E3%81%B8%E3%82%92%E9%81%B8%E6%8A%9E%E3%81%97%E3%81%BE%E3%81%99%E3%80%82" aria-hidden="true"></a> 3. スコープを追加または削除を選択、Googleアカウントのメインのメールアドレスの参照をチェックして更新した後、保存して次へを選択します。</h2>
<p><a href="https://gyazo.com/377db972bde7d2066b95d27d64d6a1f0" target="_blank" rel="nofollow noopener noreferrer"><img src="https://i.gyazo.com/377db972bde7d2066b95d27d64d6a1f0.png" alt="Image from Gyazo" loading="lazy" class="md-img"></a></p>
<h2 id="4.-%2Badd-users%E3%82%92%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF%E3%81%97%E3%81%A6%E8%87%AA%E5%88%86%E3%81%AE%E3%83%A1%E3%83%BC%E3%83%AB%E3%82%A2%E3%83%89%E3%83%AC%E3%82%B9%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%97%E3%81%9F%E3%82%89%E3%80%81%E4%BF%9D%E5%AD%98%E3%81%97%E3%81%A6%E6%AC%A1%E3%81%B8%E3%82%92%E9%81%B8%E6%8A%9E%E3%81%97%E3%81%BE%E3%81%99%E3%80%82">
<a class="header-anchor-link" href="#4.-%2Badd-users%E3%82%92%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF%E3%81%97%E3%81%A6%E8%87%AA%E5%88%86%E3%81%AE%E3%83%A1%E3%83%BC%E3%83%AB%E3%82%A2%E3%83%89%E3%83%AC%E3%82%B9%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%97%E3%81%9F%E3%82%89%E3%80%81%E4%BF%9D%E5%AD%98%E3%81%97%E3%81%A6%E6%AC%A1%E3%81%B8%E3%82%92%E9%81%B8%E6%8A%9E%E3%81%97%E3%81%BE%E3%81%99%E3%80%82" aria-hidden="true"></a> 4. +ADD USERSをクリックして自分のメールアドレスを追加したら、保存して次へを選択します。</h2>
<p><a href="https://gyazo.com/59dc4e6b38cd736283b7a5188edb7877" target="_blank" rel="nofollow noopener noreferrer"><img src="https://i.gyazo.com/59dc4e6b38cd736283b7a5188edb7877.png" alt="Image from Gyazo" loading="lazy" class="md-img"></a></p>
<h2 id="5.-api%E3%81%A8%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9(%E3%82%B5%E3%82%A4%E3%83%89%E3%83%90%E3%83%BC)%E3%81%AE%E8%AA%8D%E8%A8%BC%E6%83%85%E5%A0%B1%E3%82%92%E9%81%B8%E6%8A%9E%E3%80%81%E8%AA%8D%E8%A8%BC%E6%83%85%E5%A0%B1%E3%82%92%E4%BD%9C%E6%88%90%E3%82%92%E9%81%B8%E6%8A%9E%E3%80%81oauth%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3%E3%83%88id%E3%82%92%E9%81%B8%E6%8A%9E%E3%81%97%E3%81%BE%E3%81%99%E3%80%82">
<a class="header-anchor-link" href="#5.-api%E3%81%A8%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9(%E3%82%B5%E3%82%A4%E3%83%89%E3%83%90%E3%83%BC)%E3%81%AE%E8%AA%8D%E8%A8%BC%E6%83%85%E5%A0%B1%E3%82%92%E9%81%B8%E6%8A%9E%E3%80%81%E8%AA%8D%E8%A8%BC%E6%83%85%E5%A0%B1%E3%82%92%E4%BD%9C%E6%88%90%E3%82%92%E9%81%B8%E6%8A%9E%E3%80%81oauth%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3%E3%83%88id%E3%82%92%E9%81%B8%E6%8A%9E%E3%81%97%E3%81%BE%E3%81%99%E3%80%82" aria-hidden="true"></a> 5. APIとサービス(サイドバー)の認証情報を選択、認証情報を作成を選択、OAuthクライアントIDを選択します。</h2>
<p><a href="https://gyazo.com/5eed20929bfff2fc67980f104b8c61d0" target="_blank" rel="nofollow noopener noreferrer"><img src="https://i.gyazo.com/5eed20929bfff2fc67980f104b8c61d0.png" alt="Image from Gyazo" loading="lazy" class="md-img"></a></p>
<h2 id="6.-%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E7%A8%AE%E9%A1%9E%E3%80%81%E5%90%8D%E5%89%8D%E3%80%81%E6%89%BF%E8%AA%8D%E6%B8%88%E3%81%BF%E3%81%AEjavascript%E7%94%9F%E6%88%90%E5%85%83%E3%80%81%E6%89%BF%E8%AA%8D%E6%B8%88%E3%81%BF%E3%81%AE%E3%83%AA%E3%83%80%E3%82%A4%E3%83%AC%E3%82%AF%E3%83%88uri%E3%82%92%E5%85%A5%E5%8A%9B%E3%81%97%E3%80%81%E4%BD%9C%E6%88%90%E3%82%92%E9%81%B8%E6%8A%9E%E3%81%97%E3%81%BE%E3%81%99%E3%80%82">
<a class="header-anchor-link" href="#6.-%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E7%A8%AE%E9%A1%9E%E3%80%81%E5%90%8D%E5%89%8D%E3%80%81%E6%89%BF%E8%AA%8D%E6%B8%88%E3%81%BF%E3%81%AEjavascript%E7%94%9F%E6%88%90%E5%85%83%E3%80%81%E6%89%BF%E8%AA%8D%E6%B8%88%E3%81%BF%E3%81%AE%E3%83%AA%E3%83%80%E3%82%A4%E3%83%AC%E3%82%AF%E3%83%88uri%E3%82%92%E5%85%A5%E5%8A%9B%E3%81%97%E3%80%81%E4%BD%9C%E6%88%90%E3%82%92%E9%81%B8%E6%8A%9E%E3%81%97%E3%81%BE%E3%81%99%E3%80%82" aria-hidden="true"></a> 6. アプリケーションの種類、名前、承認済みのJavaScript生成元、承認済みのリダイレクトURIを入力し、作成を選択します。</h2>
<p><a href="https://gyazo.com/0af03daec4500f500781574329964777" target="_blank" rel="nofollow noopener noreferrer"><img src="https://i.gyazo.com/0af03daec4500f500781574329964777.png" alt="Image from Gyazo" loading="lazy" class="md-img"></a></p>
<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<p>承認済みのJavaScript生成元には開発環境のURLを入力します。<br>
承認済みのリダイレクト URIはAuth.jsに記載のcallback URLを参照しています。</p>
</div></aside>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__0d97b2692bf7" src="https://embed.zenn.studio/card#zenn-embedded__0d97b2692bf7" data-content="https%3A%2F%2Fauthjs.dev%2Fgetting-started%2Fproviders%2Fgoogle" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://authjs.dev/getting-started/providers/google" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://authjs.dev/getting-started/providers/google</a></p>
<h2 id="7.-oauth-%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3%E3%83%88%E3%82%92%E4%BD%9C%E6%88%90%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F%E3%81%A8%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%82%8B%E3%83%9D%E3%83%83%E3%83%97%E3%82%A2%E3%83%83%E3%83%97%E3%81%A7%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3%E3%83%88id%E3%81%A8%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3%E3%83%88%E3%82%B7%E3%83%BC%E3%82%AF%E3%83%AC%E3%83%83%E3%83%88%E3%81%8C%E5%8F%96%E5%BE%97%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82">
<a class="header-anchor-link" href="#7.-oauth-%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3%E3%83%88%E3%82%92%E4%BD%9C%E6%88%90%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F%E3%81%A8%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%82%8B%E3%83%9D%E3%83%83%E3%83%97%E3%82%A2%E3%83%83%E3%83%97%E3%81%A7%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3%E3%83%88id%E3%81%A8%E3%82%AF%E3%83%A9%E3%82%A4%E3%82%A2%E3%83%B3%E3%83%88%E3%82%B7%E3%83%BC%E3%82%AF%E3%83%AC%E3%83%83%E3%83%88%E3%81%8C%E5%8F%96%E5%BE%97%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%80%82" aria-hidden="true"></a> 7. OAuth クライアントを作成しましたと表示されるポップアップでクライアントIDとクライアントシークレットが取得できます。</h2>
<aside class="msg alert"><span class="msg-symbol">!</span><div class="msg-content">
<p>OAuth認証に必要なので、取得したクライアントIDとクライアントシークレットをメモ帳などにコピペして保存しておく必要があります。</p>
</div></aside>
<h2 id="8.-api%E3%81%A8%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9(%E3%82%B5%E3%82%A4%E3%83%89%E3%83%90%E3%83%BC)%E3%81%AE%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%81%8B%E3%82%89google%2B-api%E3%82%92%E9%81%B8%E6%8A%9E%E3%81%97%E3%81%A6%E6%9C%89%E5%8A%B9%E3%81%AB%E3%81%99%E3%82%8B%E3%82%92%E9%81%B8%E6%8A%9E%E3%81%97%E3%81%BE%E3%81%99%E3%80%82">
<a class="header-anchor-link" href="#8.-api%E3%81%A8%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9(%E3%82%B5%E3%82%A4%E3%83%89%E3%83%90%E3%83%BC)%E3%81%AE%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA%E3%81%8B%E3%82%89google%2B-api%E3%82%92%E9%81%B8%E6%8A%9E%E3%81%97%E3%81%A6%E6%9C%89%E5%8A%B9%E3%81%AB%E3%81%99%E3%82%8B%E3%82%92%E9%81%B8%E6%8A%9E%E3%81%97%E3%81%BE%E3%81%99%E3%80%82" aria-hidden="true"></a> 8. APIとサービス(サイドバー)のライブラリからGoogle+ APIを選択して有効にするを選択します。</h2>
<p><a href="https://gyazo.com/e4cadd2c06b3c13804eec0eea9dc1f09" target="_blank" rel="nofollow noopener noreferrer"><img src="https://i.gyazo.com/e4cadd2c06b3c13804eec0eea9dc1f09.png" alt="Image from Gyazo" loading="lazy" class="md-img"></a></p>


【Google API Console】クライアントID・クライアントシークレットを取得する方法

1. コンソール画面にアクセスします。

2. APIとサービス(サイドバー)のOAuth同意画面を選択して、アプリ名、メールアドレスを入力して、保存して次へを選択します。

3. スコープを追加または削除を選択、Googleアカウントのメインのメールアドレスの参照をチェックして更新した後、保存して次へを選択します。

4. +ADD USERSをクリックして自分のメールアドレスを追加したら、保存して次へを選択します。

5. APIとサービス(サイドバー)の認証情報を選択、認証情報を作成を選択、OAuthクライアントIDを選択します。

6. アプリケーションの種類、名前、承認済みのJavaScript生成元、承認済みのリダイレクトURIを入力し、作成を選択します。

7. OAuth クライアントを作成しましたと表示されるポップアップでクライアントIDとクライアントシークレットが取得できます。

8. APIとサービス(サイドバー)のライブラリからGoogle+ APIを選択して有効にするを選択します。

Discussion