/ Recent content on LeoJin Hugo -- gohugo.io en Thu, 26 Dec 2024 00:05:36 +0800 /posts/2024-12-26-google-oauth/ Thu, 26 Dec 2024 00:05:36 +0800 /posts/2024-12-26-google-oauth/ <h1 id="一整体流程">一、整体流程</h1> <p><img alt="流程示意" src="/posts/2024-12-26-google-oauth/images/login-google.png"></p> <h1 id="二物料准备">二、物料准备</h1> <h2 id="1google-oauth-client">1、Google Oauth Client</h2> <ul> <li>目标：获取到<code>Client ID</code>和<code>Client Secret</code>。</li> <li>官方文档：<a href="https://developers.google.com/identity/protocols/oauth2">Oauth2</a></li> <li>AI参考：<a href="https://chatgpt.com/share/676d7aa9-aad4-8010-beff-e1ad2fe45976">ChatGPT：GCP OAuth 登录集成</a></li> <li>入口：<a href="https://console.cloud.google.com/">Google Cloud Platform</a> <ul> <li>进入<code>APIs &amp; Services</code></li> <li>进入<code>Credentials</code>，点击<code>Create credentials</code>，选择<code>OAuth client ID</code></li> </ul> </li> </ul> <h2 id="2google-console-search">2、Google Console Search</h2> <ul> <li>目标：证明网站所有权，用于通过Oauth发布到生产环境的平台审核。</li> <li>入口：<a href="https://search.google.com/search-console">Google Search Console</a></li> </ul> <h1 id="三关键开发项">三、关键开发项</h1> <h2 id="1-前端sdk接入">1、 前端SDK接入</h2> <ul> <li>效果：<img alt="登录按钮" src="/posts/2024-12-26-google-oauth/images/login-google-button.png"></li> <li>依赖：<code>Oauth Client ID</code></li> <li>参考：<a href="https://www.npmjs.com/package/@react-oauth/google">@react-oauth/google</a></li> </ul> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-jsx" data-lang="jsx"><span style="display:flex;"><span><span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">GoogleOAuthProvider</span>, <span style="color:#a6e22e">GoogleLogin</span>} <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;@react-oauth/google&#39;</span>; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">GoogleLoginComponent</span> <span style="color:#f92672">=</span> () =&gt; { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">onSuccess</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">async</span> (<span style="color:#a6e22e">response</span>) =&gt; { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">response</span>); </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> ( </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">GoogleOAuthProvider</span> <span style="color:#a6e22e">clientId</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;Your Oauth ClientID&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">GoogleLogin</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">onSuccess</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">onSuccess</span>} </span></span><span style="display:flex;"><span> /&gt; </span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">GoogleOAuthProvider</span>&gt; </span></span><span style="display:flex;"><span> ); </span></span><span style="display:flex;"><span>}; </span></span></code></pre></div><h2 id="2-服务端接口">2、 服务端接口</h2> <ul> <li>接收参数 <ul> <li><code>idToken</code>：前端从SDK获取的<code>Credentials</code></li> </ul> </li> <li>验证<code>Credentials</code>，请求<code>https://oauth2.googleapis.com/tokeninfo</code> <ul> <li>接口文档：<a href="https://cloud.google.com/docs/authentication/token-types?hl=zh-cn#id">官方</a></li> <li>返回主要信息： <ul> <li><code>sub</code>：用户ID（可做为身份识别ID）</li> <li><code>name</code>：用户名称</li> <li><code>picture</code>：用户头像</li> <li><code>given_name</code>：用户名</li> <li><code>family_name</code>：用户姓氏</li> <li><code>email</code>：用户邮箱</li> <li><code>email_verified</code>：邮箱是否验证</li> <li><code>aud</code>：Oauth Client ID（需校验）</li> <li><code>exp</code>：过期时间</li> </ul> </li> </ul> </li> <li>新老用户逻辑：根据<code>sub</code>查询用户，如果不存在则创建新用户</li> <li>Session处理：返回业务登录凭据</li> </ul> <h1 id="四开发发布">四、开发&amp;发布</h1> <h2 id="1-开发测试">1、 开发测试</h2> <p>在<a href="https://console.cloud.google.com/auth/clients">Google Auth Platform/Client ID for Web application</a>中修改<code>Authorized JavaScript origins</code>，填写本地开发环境和测试环境的地址（支持http://127.0.0.1:xxxx）</p> <h1 id="一整体流程">一、整体流程</h1> <p><img alt="流程示意" src="/posts/2024-12-26-google-oauth/images/login-google.png"></p> <h1 id="二物料准备">二、物料准备</h1> <h2 id="1google-oauth-client">1、Google Oauth Client</h2> <ul> <li>目标：获取到<code>Client ID</code>和<code>Client Secret</code>。</li> <li>官方文档：<a href="https://developers.google.com/identity/protocols/oauth2">Oauth2</a></li> <li>AI参考：<a href="https://chatgpt.com/share/676d7aa9-aad4-8010-beff-e1ad2fe45976">ChatGPT：GCP OAuth 登录集成</a></li> <li>入口：<a href="https://console.cloud.google.com/">Google Cloud Platform</a> <ul> <li>进入<code>APIs &amp; Services</code></li> <li>进入<code>Credentials</code>，点击<code>Create credentials</code>，选择<code>OAuth client ID</code></li> </ul> </li> </ul> <h2 id="2google-console-search">2、Google Console Search</h2> <ul> <li>目标：证明网站所有权，用于通过Oauth发布到生产环境的平台审核。</li> <li>入口：<a href="https://search.google.com/search-console">Google Search Console</a></li> </ul> <h1 id="三关键开发项">三、关键开发项</h1> <h2 id="1-前端sdk接入">1、 前端SDK接入</h2> <ul> <li>效果：<img alt="登录按钮" src="/posts/2024-12-26-google-oauth/images/login-google-button.png"></li> <li>依赖：<code>Oauth Client ID</code></li> <li>参考：<a href="https://www.npmjs.com/package/@react-oauth/google">@react-oauth/google</a></li> </ul> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-jsx" data-lang="jsx"><span style="display:flex;"><span><span style="color:#66d9ef">import</span> {<span style="color:#a6e22e">GoogleOAuthProvider</span>, <span style="color:#a6e22e">GoogleLogin</span>} <span style="color:#a6e22e">from</span> <span style="color:#e6db74">&#39;@react-oauth/google&#39;</span>; </span></span><span style="display:flex;"><span> </span></span><span style="display:flex;"><span><span style="color:#66d9ef">const</span> <span style="color:#a6e22e">GoogleLoginComponent</span> <span style="color:#f92672">=</span> () =&gt; { </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">const</span> <span style="color:#a6e22e">onSuccess</span> <span style="color:#f92672">=</span> <span style="color:#66d9ef">async</span> (<span style="color:#a6e22e">response</span>) =&gt; { </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">console</span>.<span style="color:#a6e22e">log</span>(<span style="color:#a6e22e">response</span>); </span></span><span style="display:flex;"><span> } </span></span><span style="display:flex;"><span> <span style="color:#66d9ef">return</span> ( </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">GoogleOAuthProvider</span> <span style="color:#a6e22e">clientId</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;Your Oauth ClientID&#34;</span>&gt; </span></span><span style="display:flex;"><span> &lt;<span style="color:#f92672">GoogleLogin</span> </span></span><span style="display:flex;"><span> <span style="color:#a6e22e">onSuccess</span><span style="color:#f92672">=</span>{<span style="color:#a6e22e">onSuccess</span>} </span></span><span style="display:flex;"><span> /&gt; </span></span><span style="display:flex;"><span> &lt;/<span style="color:#f92672">GoogleOAuthProvider</span>&gt; </span></span><span style="display:flex;"><span> ); </span></span><span style="display:flex;"><span>}; </span></span></code></pre></div><h2 id="2-服务端接口">2、 服务端接口</h2> <ul> <li>接收参数 <ul> <li><code>idToken</code>：前端从SDK获取的<code>Credentials</code></li> </ul> </li> <li>验证<code>Credentials</code>，请求<code>https://oauth2.googleapis.com/tokeninfo</code> <ul> <li>接口文档：<a href="https://cloud.google.com/docs/authentication/token-types?hl=zh-cn#id">官方</a></li> <li>返回主要信息： <ul> <li><code>sub</code>：用户ID（可做为身份识别ID）</li> <li><code>name</code>：用户名称</li> <li><code>picture</code>：用户头像</li> <li><code>given_name</code>：用户名</li> <li><code>family_name</code>：用户姓氏</li> <li><code>email</code>：用户邮箱</li> <li><code>email_verified</code>：邮箱是否验证</li> <li><code>aud</code>：Oauth Client ID（需校验）</li> <li><code>exp</code>：过期时间</li> </ul> </li> </ul> </li> <li>新老用户逻辑：根据<code>sub</code>查询用户，如果不存在则创建新用户</li> <li>Session处理：返回业务登录凭据</li> </ul> <h1 id="四开发发布">四、开发&amp;发布</h1> <h2 id="1-开发测试">1、 开发测试</h2> <p>在<a href="https://console.cloud.google.com/auth/clients">Google Auth Platform/Client ID for Web application</a>中修改<code>Authorized JavaScript origins</code>，填写本地开发环境和测试环境的地址（支持http://127.0.0.1:xxxx）</p> <h2 id="2-发布正式">2、 发布正式</h2> <p>在<a href="https://console.cloud.google.com/auth/audience">Google Auth Platform/Audience</a>中，切换到<code>Production</code>，提交审核，审核通过后即可上线使用。 审核期间如有问题，会有邮件通知（体验很快，1天内就给了反馈），根据邮件提示修改即可。</p> /posts/2024-11/ Wed, 06 Nov 2024 02:10:25 +0800 /posts/2024-11/ <p>脑子里有个Idea很宏伟，想去实现它。</p> <p>脑子里有个Idea很宏伟，想去实现它。</p> /posts/2024-04/ Wed, 09 Oct 2024 22:28:07 +0800 /posts/2024-04/ <p>丽水</p> <p>丽水</p> /posts/2024-03/ Sat, 02 Mar 2024 23:15:14 +0800 /posts/2024-03/ <p>夏夏</p> <p>夏夏</p> /posts/hello-world/ Sun, 25 Jun 2023 01:14:27 +0800 /posts/hello-world/ <p>Bye WordPress.</p> <p>Hello Hugo &amp; Github.io.</p> <p>Bye WordPress.</p> <p>Hello Hugo &amp; Github.io.</p>