{"id":3749,"date":"2021-05-26T05:19:25","date_gmt":"2021-05-25T20:19:25","guid":{"rendered":"https:\/\/hanami-web.tokyo.jp\/blog\/?p=3749"},"modified":"2021-06-07T08:42:58","modified_gmt":"2021-06-06T23:42:58","slug":"google-login","status":"publish","type":"post","link":"https:\/\/hanami-web.tokyo.jp\/blog\/en\/microjobs\/google-login\/","title":{"rendered":"2021 version Google Login API key issuance procedure"},"content":{"rendered":"<p>HanamiWEB representative Misa (<a href=\"https:\/\/twitter.com\/hanami_web\" target=\"_blank\" rel=\"noopener\">@hanami_web<\/a>)is.<br>I am building a matching site with WordPress using the matching site theme, and the matching site theme has a Google login mechanism.<\/p>\n\n\n\n<p>I needed to issue an API key to log in with Google, so I&#039;ll explain how to do it!<\/p>\n\n\n\n<p><a href=\"https:\/\/hanami-web.tokyo.jp\/blog\/en\/microjobs\/twitter-login-api\/\">Twitter login API key issuance<\/a>&nbsp;\/&nbsp;<a href=\"https:\/\/hanami-web.tokyo.jp\/blog\/en\/microjobs\/facebook-login\/\">Facebook Login API key generation<\/a>This is summarized in a separate article.<\/p>\n\n\n\n<p>Now, let&#039;s show you how to issue an API key for Google Login!<\/p>\n\n\n\n<p>The theme for the matching site we will be setting up this time is PremiumPress.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-hanamiweb-blog wp-block-embed-hanamiweb-blog\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"avlnLOEyPJ\"><a href=\"https:\/\/hanami-web.tokyo.jp\/blog\/en\/microjobs\/about-matchingsite-theme3\/\">This is the theme that can be used to create a matching site using WordPress!<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"\u201cThis is the theme that can be used to create a matching site with WordPress!\u201d \u2014 How to create a homepage using WordPress\" src=\"https:\/\/hanami-web.tokyo.jp\/blog\/microjobs\/about-matchingsite-theme3\/embed\/#?secret=AK94yg0tFa#?secret=avlnLOEyPJ\" data-secret=\"avlnLOEyPJ\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n\n\n<div class=\"sc\"><a href=\"https:\/\/hanami-web.tokyo.jp\/blog\/en\/premiumpress-microjob-wordpress\/\" title=\"PremiumPress Theme Explanation Table of Contents\">\r\n\t<p class=\"sc-txt01\">This is an older article.<\/p>\r\n\t<p class=\"sc-txt01\">The design has changed significantly, so please use it as a reference only.<\/p>\r\n\t<p class=\"sc-txt02\">PremiumPress Commentary Table of Contents \u2192<\/p>\r\n<\/a><\/div>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_82_2 ez-toc-wrap-center counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">table of contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #000000;color:#000000\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #000000;color:#000000\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewbox=\"0 0 24 24\" version=\"1.2\" baseprofile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/hanami-web.tokyo.jp\/blog\/en\/microjobs\/google-login\/#google_cloud_platform%e3%81%b8%e3%83%ad%e3%82%b0%e3%82%a4%e3%83%b3\" >Log in to Google Cloud Platform<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/hanami-web.tokyo.jp\/blog\/en\/microjobs\/google-login\/#google%e3%83%ad%e3%82%b0%e3%82%a4%e3%83%b3_%e7%94%a8%e3%83%97%e3%83%ad%e3%82%b8%e3%82%a7%e3%82%af%e3%83%88%e5%90%8d%e5%85%a5%e5%8a%9b\" >Enter project name for Google login<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/hanami-web.tokyo.jp\/blog\/en\/microjobs\/google-login\/#google%e3%83%ad%e3%82%b0%e3%82%a4%e3%83%b3_%e7%94%a8%e3%81%aeaouth_%e5%90%8c%e6%84%8f%e8%a8%ad%e5%ae%9a\" >AOuth consent settings for Google Login<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/hanami-web.tokyo.jp\/blog\/en\/microjobs\/google-login\/#oauth_%e5%90%8c%e6%84%8f%e8%a8%ad%e5%ae%9a\" >OAuth Consent Settings<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/hanami-web.tokyo.jp\/blog\/en\/microjobs\/google-login\/#google%e3%83%ad%e3%82%b0%e3%82%a4%e3%83%b3_%e3%81%ae%e3%82%a2%e3%83%97%e3%83%aa%e5%90%8d%e5%85%a5%e5%8a%9b\" >Enter the Google Login app name<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/hanami-web.tokyo.jp\/blog\/en\/microjobs\/google-login\/#%e3%83%aa%e3%83%b3%e3%82%af%e5%85%88%e3%81%ae%e7%99%bb%e9%8c%b2\" >Link registration<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/hanami-web.tokyo.jp\/blog\/en\/microjobs\/google-login\/#%e3%83%89%e3%83%a1%e3%82%a4%e3%83%b3%e7%99%bb%e9%8c%b2%e3%83%bb%e3%83%a1%e3%83%bc%e3%83%ab%e3%82%a2%e3%83%89%e3%83%ac%e3%82%b9%e7%99%bb%e9%8c%b2\" >Domain registration\/Email address registration<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/hanami-web.tokyo.jp\/blog\/en\/microjobs\/google-login\/#google%e3%83%ad%e3%82%b0%e3%82%a4%e3%83%b3_%e3%81%a7%e3%81%af%e3%82%b9%e3%82%b3%e3%83%bc%e3%83%97%e3%83%bb%e3%83%86%e3%82%b9%e3%83%88%e3%83%a6%e3%83%bc%e3%82%b6%e3%83%bc%e4%b8%8d%e8%a6%81\" >Google Login does not require scope or test user<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/hanami-web.tokyo.jp\/blog\/en\/microjobs\/google-login\/#google%e3%83%ad%e3%82%b0%e3%82%a4%e3%83%b3_%e7%94%a8%e8%aa%8d%e8%a8%bc%e6%83%85%e5%a0%b1%e7%99%ba%e8%a1%8c\" >Issue authentication information for Google login<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/hanami-web.tokyo.jp\/blog\/en\/microjobs\/google-login\/#oauth_%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\" >Select your OAuth client ID<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/hanami-web.tokyo.jp\/blog\/en\/microjobs\/google-login\/#%e3%82%a6%e3%82%a7%e3%83%96%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%82%92%e9%81%b8%e6%8a%9e\" >Select Web Application<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/hanami-web.tokyo.jp\/blog\/en\/microjobs\/google-login\/#oauth%e8%aa%8d%e8%a8%bc%e7%99%ba%e8%a1%8c%e7%94%a8%e5%bf%85%e8%a6%81%e4%ba%8b%e9%a0%85%e5%85%a5%e5%8a%9b\" >Enter the necessary information for issuing OAuth authentication<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/hanami-web.tokyo.jp\/blog\/en\/microjobs\/google-login\/#%e3%82%af%e3%83%a9%e3%82%a4%e3%82%a2%e3%83%b3%e3%83%88id%e3%82%92%e3%82%b7%e3%83%bc%e3%82%af%e3%83%ac%e3%83%83%e3%83%88%e7%99%ba%e8%a1%8c\" >Issue a client ID secret<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/hanami-web.tokyo.jp\/blog\/en\/microjobs\/google-login\/#%ef%bc%88%e5%bf%98%e3%82%8c%e3%81%aa%e3%81%84%e3%81%a7%ef%bc%81%ef%bc%89%e5%85%ac%e9%96%8b%e8%a8%ad%e5%ae%9a\" >(Don&#039;t forget!) Public settings<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/hanami-web.tokyo.jp\/blog\/en\/microjobs\/google-login\/#google%e3%83%ad%e3%82%b0%e3%82%a4%e3%83%b3_api%e3%82%ad%e3%83%bc%e8%a8%ad%e5%ae%9a%e3%81%af%e5%ae%8c%e4%ba%86\" >Google Login API key setting is complete<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"google_cloud_platform%e3%81%b8%e3%83%ad%e3%82%b0%e3%82%a4%e3%83%b3\"><\/span>Log in to Google Cloud Platform<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>First, log in to Google Cloud Platform and create a new project.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-cocoon-blocks-button-1 aligncenter button-block\"><a href=\"https:\/\/console.cloud.google.com\/apis\/dashboard\" class=\"btn btn-m btn-circle has-background has-key-color-background-color\" target=\"_blank\" rel=\"noopener\">Log in to Google Cloud Platform<\/a><\/div>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"177\" src=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-124-1024x177.png\" alt=\"\" class=\"wp-image-3750\" srcset=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-124-1024x177.png 1024w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-124-300x52.png 300w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-124-768x132.png 768w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-124.png 1490w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"google%e3%83%ad%e3%82%b0%e3%82%a4%e3%83%b3_%e7%94%a8%e3%83%97%e3%83%ad%e3%82%b8%e3%82%a7%e3%82%af%e3%83%88%e5%90%8d%e5%85%a5%e5%8a%9b\"><\/span>Enter project name for Google login<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>First, enter the project name for Google Login that you are creating and click the [Create] button. The following settings are required here:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Project name - any string<\/li><li>Location \u2013 Without organization<\/li><li><\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"753\" height=\"446\" src=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-125.png\" alt=\"\" class=\"wp-image-3751\" srcset=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-125.png 753w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-125-300x178.png 300w\" sizes=\"(max-width: 753px) 100vw, 753px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"google%e3%83%ad%e3%82%b0%e3%82%a4%e3%83%b3_%e7%94%a8%e3%81%aeaouth_%e5%90%8c%e6%84%8f%e8%a8%ad%e5%ae%9a\"><\/span>AOuth consent settings for Google Login<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>We will set up the AOuth consent settings for the Google login we will create this time.<\/p>\n\n\n\n<p>Click on [OAuth consent screen] on the left sidebar. If you can&#039;t find this screen,<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"790\" height=\"581\" src=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-126.png\" alt=\"\" class=\"wp-image-3752\" srcset=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-126.png 790w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-126-300x221.png 300w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-126-768x565.png 768w\" sizes=\"(max-width: 790px) 100vw, 790px\" \/><\/figure>\n\n\n\n<p>Expand the hamburger menu in the upper left and click [APIs and Services] to move to the page.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"388\" height=\"710\" src=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-127.png\" alt=\"\" class=\"wp-image-3753\" srcset=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-127.png 388w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-127-164x300.png 164w\" sizes=\"(max-width: 388px) 100vw, 388px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"oauth_%e5%90%8c%e6%84%8f%e8%a8%ad%e5%ae%9a\"><\/span>OAuth Consent Settings<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Since Google Login will be used by external users to log in, select External and click the [Create] button.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"676\" src=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-128-1024x676.png\" alt=\"\" class=\"wp-image-3754\" srcset=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-128-1024x676.png 1024w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-128-300x198.png 300w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-128-768x507.png 768w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-128.png 1050w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"google%e3%83%ad%e3%82%b0%e3%82%a4%e3%83%b3_%e3%81%ae%e3%82%a2%e3%83%97%e3%83%aa%e5%90%8d%e5%85%a5%e5%8a%9b\"><\/span>Enter the Google Login app name<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>It is a good idea to enter the site name you use for Google login.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>app name<\/li><li>User support email - Select from your Google account<\/li><li>App logo (optional) - will be displayed during login setup once you have registered<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"614\" src=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-129-1024x614.png\" alt=\"\" class=\"wp-image-3755\" srcset=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-129-1024x614.png 1024w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-129-300x180.png 300w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-129-768x461.png 768w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-129.png 1170w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%e3%83%aa%e3%83%b3%e3%82%af%e5%85%88%e3%81%ae%e7%99%bb%e9%8c%b2\"><\/span>Link registration<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Although it is not required, you should register various link destinations for your site URL.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Application Homepage - URL of your production site<\/li><li>Application Privacy Policy Link - Privacy Policy Page URL<\/li><li>Application Terms of Use Link - Terms of Use page URL<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"742\" height=\"496\" src=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-130.png\" alt=\"\" class=\"wp-image-3756\" srcset=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-130.png 742w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-130-300x201.png 300w\" sizes=\"(max-width: 742px) 100vw, 742px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%e3%83%89%e3%83%a1%e3%82%a4%e3%83%b3%e7%99%bb%e9%8c%b2%e3%83%bb%e3%83%a1%e3%83%bc%e3%83%ab%e3%82%a2%e3%83%89%e3%83%ac%e3%82%b9%e7%99%bb%e9%8c%b2\"><\/span>Domain registration\/Email address registration<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Register a domain. Click [Add Domain] and enter it, enter your email address and click [Save and Next]. The information required here is<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Approved Domains - Even if you use a subdomain, you can register the parent domain.<\/li><li>Developer Contact - Email address to receive notifications about this app<\/li><\/ul>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"722\" height=\"517\" src=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-132.png\" alt=\"\" class=\"wp-image-3758\" srcset=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-132.png 722w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-132-300x215.png 300w\" sizes=\"(max-width: 722px) 100vw, 722px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"google%e3%83%ad%e3%82%b0%e3%82%a4%e3%83%b3_%e3%81%a7%e3%81%af%e3%82%b9%e3%82%b3%e3%83%bc%e3%83%97%e3%83%bb%e3%83%86%e3%82%b9%e3%83%88%e3%83%a6%e3%83%bc%e3%82%b6%e3%83%bc%e4%b8%8d%e8%a6%81\"><\/span>Google Login does not require scope or test user<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>When implementing Google Login, scope and test user settings are not required, so I proceeded to the next step without setting anything.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"760\" height=\"230\" src=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-133.png\" alt=\"\" class=\"wp-image-3759\" srcset=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-133.png 760w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-133-300x91.png 300w\" sizes=\"(max-width: 760px) 100vw, 760px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"google%e3%83%ad%e3%82%b0%e3%82%a4%e3%83%b3_%e7%94%a8%e8%aa%8d%e8%a8%bc%e6%83%85%e5%a0%b1%e7%99%ba%e8%a1%8c\"><\/span>Issue authentication information for Google login<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Finally, you can now issue your Google login credentials.<\/p>\n\n\n\n<p>Click &quot;Credentials&quot; on the left sidebar and then click &quot;Create Credentials.&quot;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"555\" src=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-136-1024x555.png\" alt=\"\" class=\"wp-image-3762\" srcset=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-136-1024x555.png 1024w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-136-300x163.png 300w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-136-768x417.png 768w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-136.png 1110w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"oauth_%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\"><\/span>Select your OAuth client ID<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Since we will be accessing user data to implement login this time, select the OAuth client ID.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"631\" height=\"360\" src=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-138.png\" alt=\"\" class=\"wp-image-3764\" srcset=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-138.png 631w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-138-300x171.png 300w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-138-120x68.png 120w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-138-160x90.png 160w\" sizes=\"(max-width: 631px) 100vw, 631px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%e3%82%a6%e3%82%a7%e3%83%96%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%82%92%e9%81%b8%e6%8a%9e\"><\/span>Select Web Application<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Since we want to use it in a web browser, we will select Web Application.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"650\" height=\"527\" src=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-139.png\" alt=\"\" class=\"wp-image-3765\" srcset=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-139.png 650w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-139-300x243.png 300w\" sizes=\"(max-width: 650px) 100vw, 650px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"oauth%e8%aa%8d%e8%a8%bc%e7%99%ba%e8%a1%8c%e7%94%a8%e5%bf%85%e8%a6%81%e4%ba%8b%e9%a0%85%e5%85%a5%e5%8a%9b\"><\/span>Enter the necessary information for issuing OAuth authentication<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Name - This is a name to identify the account on the admin screen, so any string will do.<\/li><li>Authorized Redirect URLs - Enter your callback URLs here.<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"655\" height=\"777\" src=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-140.png\" alt=\"\" class=\"wp-image-3766\" srcset=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-140.png 655w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-140-253x300.png 253w\" sizes=\"(max-width: 655px) 100vw, 655px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%e3%82%af%e3%83%a9%e3%82%a4%e3%82%a2%e3%83%b3%e3%83%88id%e3%82%92%e3%82%b7%e3%83%bc%e3%82%af%e3%83%ac%e3%83%83%e3%83%88%e7%99%ba%e8%a1%8c\"><\/span>Issue a client ID secret<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>You have now been issued a client ID and secret.<\/p>\n\n\n\n<p>Copy and paste it into the input section of the theme.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Client ID \u21d2 APP key<\/li><li>Secret \u21d2 Secret Key<\/li><\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"562\" height=\"515\" src=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-141.png\" alt=\"\" class=\"wp-image-3767\" srcset=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-141.png 562w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-141-300x275.png 300w\" sizes=\"(max-width: 562px) 100vw, 562px\" \/><\/figure>\n\n\n\n<p>If you close this screen...<\/p>\n\n\n\n<p>Clicking on the pencil mark on this screen will take you to a details page where you can check your secret key.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"338\" src=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-142-1024x338.png\" alt=\"\" class=\"wp-image-3768\" srcset=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-142-1024x338.png 1024w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-142-300x99.png 300w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-142-768x253.png 768w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-142-1536x507.png 1536w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-142.png 1873w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%ef%bc%88%e5%bf%98%e3%82%8c%e3%81%aa%e3%81%84%e3%81%a7%ef%bc%81%ef%bc%89%e5%85%ac%e9%96%8b%e8%a8%ad%e5%ae%9a\"><\/span>(Don&#039;t forget!) Public settings<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Once you have been issued an API key for Google login, you must click the [Publish App] button before you can start using it.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"762\" height=\"498\" src=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-143.png\" alt=\"\" class=\"wp-image-3769\" srcset=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-143.png 762w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-143-300x196.png 300w\" sizes=\"(max-width: 762px) 100vw, 762px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"google%e3%83%ad%e3%82%b0%e3%82%a4%e3%83%b3_api%e3%82%ad%e3%83%bc%e8%a8%ad%e5%ae%9a%e3%81%af%e5%ae%8c%e4%ba%86\"><\/span>Google Login API key setting is complete<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>When I tested it, the login screen was displayed without any problems.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"636\" height=\"798\" src=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-144.png\" alt=\"\" class=\"wp-image-3771\" srcset=\"https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-144.png 636w, https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-144-239x300.png 239w\" sizes=\"(max-width: 636px) 100vw, 636px\" \/><\/figure>\n\n\n\n<p>The Google login settings were also in Japanese, so I was able to complete the setup smoothly.<\/p>\n\n\n\n<p>It may be that I am already familiar with it because I use other apps to sync with Google Calendar and set up Google Maps API.<\/p>\n\n\n\n<p>We have now completed explaining how to set up three types of SNS login for the matching site theme.<\/p>\n\n\n\n<p><a href=\"https:\/\/hanami-web.tokyo.jp\/blog\/en\/microjobs\/twitter-login-api\/\">Twitter Login API key issuing procedure<\/a> \/ <a href=\"https:\/\/hanami-web.tokyo.jp\/blog\/en\/microjobs\/facebook-login\/\">Facebook Login API key generation procedure<\/a><\/p>\n\n\n\n<p>It&#039;s great if the theme has a social media login function, as it allows you to easily implement the login function without needing to use an embed code.<\/p>\n\n\n\n<p>The theme I&#039;m using is<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-hanamiweb-blog wp-block-embed-hanamiweb-blog\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"avlnLOEyPJ\"><a href=\"https:\/\/hanami-web.tokyo.jp\/blog\/en\/microjobs\/about-matchingsite-theme3\/\">This is the theme that can be used to create a matching site using WordPress!<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"\u201cThis is the theme that can be used to create a matching site with WordPress!\u201d \u2014 How to create a homepage using WordPress\" src=\"https:\/\/hanami-web.tokyo.jp\/blog\/microjobs\/about-matchingsite-theme3\/embed\/#?secret=AK94yg0tFa#?secret=avlnLOEyPJ\" data-secret=\"avlnLOEyPJ\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n\n\n\n\n\n\n<div class=\"sc\"><a href=\"https:\/\/hanami-web.tokyo.jp\/blog\/en\/premiumpress-microjob-wordpress\/\" title=\"PremiumPress Theme Explanation Table of Contents\">\r\n\t<p class=\"sc-txt01\">This is an older article.<\/p>\r\n\t<p class=\"sc-txt01\">The design has changed significantly, so please use it as a reference only.<\/p>\r\n\t<p class=\"sc-txt02\">PremiumPress Commentary Table of Contents \u2192<\/p>\r\n<\/a><\/div>","protected":false},"excerpt":{"rendered":"<p>HanamiWEB\u4ee3\u8868\u306emisa(@hanami_web)\u3067\u3059\u3002\u30de\u30c3\u30c1\u30f3\u30b0\u30b5\u30a4\u30c8\u30c6\u30fc\u30de\u3092\u5229\u7528\u3057\u3066WordPress\u3067\u30de\u30c3\u30c1\u30f3\u30b0\u30b5\u30a4\u30c8\u3092\u69cb\u7bc9\u3057\u3066\u3044\u308b\u306e\u3067\u3059\u304c\u3001\u30de\u30c3\u30c1\u30f3\u30b0\u30b5\u30a4\u30c8\u306e\u30c6\u30fc\u30de\u306bgoogle\u30ed\u30b0\u30a4\u30f3\u306e\u4ed5\u7d44\u307f\u304c\u3064\u3044\u3066\u3044 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3771,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"content-type":"","_uag_custom_page_level_css":"","footnotes":""},"categories":[1456],"tags":[1468],"class_list":["post-3749","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-microjobs","tag-google"],"blocksy_meta":[],"aioseo_notices":[],"uagb_featured_image_src":{"full":["https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-144.png",636,798,false],"thumbnail":["https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-144-150x150.png",150,150,true],"medium":["https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-144-239x300.png",239,300,true],"medium_large":["https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-144.png",636,798,false],"large":["https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-144.png",636,798,false],"1536x1536":["https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-144.png",636,798,false],"2048x2048":["https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-144.png",636,798,false],"trp-custom-language-flag":["https:\/\/hanami-web.tokyo.jp\/blog\/wp-content\/uploads\/2021\/05\/image-144.png",10,12,false]},"uagb_author_info":{"display_name":"\u682a\u5f0f\u4f1a\u793eHanamiWEB \u4ee3\u8868\u53d6\u7de0\u5f79 \u677e\u6d66\u307f\u3055","author_link":"https:\/\/hanami-web.tokyo.jp\/blog\/en\/author\/hanami\/"},"uagb_comment_info":0,"uagb_excerpt":"HanamiWEB\u4ee3\u8868\u306emisa(@hanami_web)\u3067\u3059\u3002\u30de\u30c3\u30c1\u30f3\u30b0\u30b5\u30a4\u30c8\u30c6\u30fc\u30de\u3092\u5229\u7528\u3057\u3066WordPre&hellip;","brizy_media":[],"_links":{"self":[{"href":"https:\/\/hanami-web.tokyo.jp\/blog\/en\/wp-json\/wp\/v2\/posts\/3749","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hanami-web.tokyo.jp\/blog\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hanami-web.tokyo.jp\/blog\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hanami-web.tokyo.jp\/blog\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hanami-web.tokyo.jp\/blog\/en\/wp-json\/wp\/v2\/comments?post=3749"}],"version-history":[{"count":0,"href":"https:\/\/hanami-web.tokyo.jp\/blog\/en\/wp-json\/wp\/v2\/posts\/3749\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hanami-web.tokyo.jp\/blog\/en\/wp-json\/wp\/v2\/media\/3771"}],"wp:attachment":[{"href":"https:\/\/hanami-web.tokyo.jp\/blog\/en\/wp-json\/wp\/v2\/media?parent=3749"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hanami-web.tokyo.jp\/blog\/en\/wp-json\/wp\/v2\/categories?post=3749"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hanami-web.tokyo.jp\/blog\/en\/wp-json\/wp\/v2\/tags?post=3749"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}