"use strict";(self.webpackChunknewoaks_help=self.webpackChunknewoaks_help||[]).push([[6565],{814:(e,n,t)=>{t.d(n,{A:()=>i});const i=t.p+"assets/images/googlelogin-copy-client-id-and-client-secret-43866370f906baf13f87443531afa053.png"},2003:(e,n,t)=>{t.d(n,{A:()=>i});const i=t.p+"assets/images/googlelogin-input-client-id-and-client-secret-2460481104d317cfe6833420e9e453d9.png"},3331:(e,n,t)=>{t.d(n,{A:()=>i});const i=t.p+"assets/images/googlelogin-click-apis-services-026ffe5f4f44fd0d895c3e614109275e.png"},3454:(e,n,t)=>{t.d(n,{A:()=>i});const i=t.p+"assets/images/integration-click-settings-ad5aff24a260b49c708dad7641ed0773.png"},4324:(e,n,t)=>{t.d(n,{A:()=>i});const i=t.p+"assets/images/googlelogin-copy-google-redirect-url-17c9000ea803c2e63a9f61294d8ba8bc.png"},4659:(e,n,t)=>{t.d(n,{A:()=>i});const i=t.p+"assets/images/googlelogin-click-googlelogin-cbd64b4ef56c241b0f4b226ba21cf0ce.png"},6436:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>a,contentTitle:()=>g,default:()=>h,frontMatter:()=>c,metadata:()=>i,toc:()=>r});const i=JSON.parse('{"id":"integration-googlelogin","title":"Google Login Integration","description":"Set Google Login in EZsite","source":"@site/Integration/011.integration-googlelogin.md","sourceDirName":".","slug":"/integration-googlelogin","permalink":"/guides/integration/integration-googlelogin","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":11,"frontMatter":{"sidebar_position":11},"sidebar":"sidebar","previous":{"title":"Google Place Integration","permalink":"/guides/integration/integration-googleplace"},"next":{"title":"Facebook Login Integration","permalink":"/guides/integration/integration-facebooklogin"}}');var o=t(4848),s=t(8453),l=t(8175);const c={sidebar_position:11},g="Google Login Integration",a={},r=[{value:"Set Google Login in EZsite",id:"set-google-login-in-ezsite",level:2},{value:"Using Google Login to Sign in to EZsite",id:"using-google-login-to-sign-in-to-ezsite",level:2}];function d(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",...(0,s.R)(),...e.components};return(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(n.header,{children:(0,o.jsx)(n.h1,{id:"google-login-integration",children:"Google Login Integration"})}),"\n",(0,o.jsx)(n.h2,{id:"set-google-login-in-ezsite",children:"Set Google Login in EZsite"}),"\n",(0,o.jsxs)(n.ol,{children:["\n",(0,o.jsxs)(n.li,{children:["\n",(0,o.jsxs)(n.p,{children:["In ",(0,o.jsx)(l.A,{}),', enter a project, click the "Settings" button in the top right corner to open the settings panel.']}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.img,{alt:"click settings",src:t(3454).A+"",width:"554",height:"79"})}),"\n"]}),"\n",(0,o.jsxs)(n.li,{children:["\n",(0,o.jsx)(n.p,{children:'In the settings panel, click on "Third-party Integration", then click the "Google Login" button to enter the Google Login settings page.'}),"\n"]}),"\n",(0,o.jsxs)(n.li,{children:["\n",(0,o.jsxs)(n.p,{children:["On the Google Login settings page, to enable Google login, you must first enable ",(0,o.jsx)(l.A,{}),' Database. Click the "Enable now" button to navigate to the Database tab.']}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.img,{alt:"click google login",src:t(4659).A+"",width:"993",height:"474"})}),"\n"]}),"\n",(0,o.jsxs)(n.li,{children:["\n",(0,o.jsxs)(n.p,{children:['On the Database settings page, click the "Enable Database" button, select "',(0,o.jsx)(l.A,{}),' Database" for the Database Type, then click the "Save" button to save the settings.']}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.img,{alt:"enable database",src:t(6548).A+"",width:"995",height:"455"})}),"\n"]}),"\n",(0,o.jsxs)(n.li,{children:["\n",(0,o.jsx)(n.p,{children:'Return to the Third-party Integration tab, click the "Google login" button, and copy the Google Redirect URL, which will be used in step 8.'}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.img,{alt:"copy google redirect url",src:t(4324).A+"",width:"999",height:"435"})}),"\n"]}),"\n",(0,o.jsxs)(n.li,{children:["\n",(0,o.jsxs)(n.p,{children:["Open the ",(0,o.jsx)(n.a,{href:"https://console.cloud.google.com/",children:"Google Cloud Console"}),', create a new project or open an existing one, click the project name, then click the "APIs & Services" button.']}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.img,{alt:"click APIs & Services",src:t(3331).A+"",width:"1011",height:"488"})}),"\n"]}),"\n",(0,o.jsxs)(n.li,{children:["\n",(0,o.jsx)(n.p,{children:'In the project, click the "Credentials" button, click the "Create Credentials" button, select "OAuth Client ID".'}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.img,{alt:"create credentials",src:t(9427).A+"",width:"1150",height:"568"})}),"\n"]}),"\n",(0,o.jsxs)(n.li,{children:["\n",(0,o.jsxs)(n.p,{children:['Set application type to "Web application", set the application name, for example "',(0,o.jsx)(l.A,{}),' Google Login", then enter the Google Redirect URL copied in step 5 in the Authorized redirect URIs field, then click the "Create" button to create the credentials.']}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.img,{alt:"set redirect url",src:t(6779).A+"",width:"782",height:"783"})}),"\n"]}),"\n",(0,o.jsxs)(n.li,{children:["\n",(0,o.jsx)(n.p,{children:"This will generate a Client ID and Client Secret. Copy the Client ID and Client Secret."}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.img,{alt:"copy client id and client secret",src:t(814).A+"",width:"1041",height:"795"})}),"\n"]}),"\n",(0,o.jsxs)(n.li,{children:["\n",(0,o.jsxs)(n.p,{children:["Return to the Google Login settings page in ",(0,o.jsx)(l.A,{}),', enter the Client ID and Client Secret copied in step 9, then click the "Save" button to save the settings.']}),"\n",(0,o.jsx)(n.p,{children:(0,o.jsx)(n.img,{alt:"input client id and client secret",src:t(2003).A+"",width:"1025",height:"469"})}),"\n"]}),"\n"]}),"\n",(0,o.jsx)(n.h2,{id:"using-google-login-to-sign-in-to-ezsite",children:"Using Google Login to Sign in to EZsite"}),"\n",(0,o.jsx)(n.p,{children:"Use the following prompt to create a website with Google login."}),"\n",(0,o.jsx)(n.pre,{children:(0,o.jsx)(n.code,{children:"Create a Sudoku mini-game where users can login, register, and use Google login.\n"})})]})}function h(e={}){const{wrapper:n}={...(0,s.R)(),...e.components};return n?(0,o.jsx)(n,{...e,children:(0,o.jsx)(d,{...e})}):d(e)}},6548:(e,n,t)=>{t.d(n,{A:()=>i});const i=t.p+"assets/images/integration-enable-ezsite-database-807cc7edce541362417f452d71192f25.png"},6779:(e,n,t)=>{t.d(n,{A:()=>i});const i=t.p+"assets/images/googlelogin-set-redirect-url-520f8837c6e4733ee55d606b94869448.png"},8175:(e,n,t)=>{t.d(n,{A:()=>o});t(6540);var i=t(4848);function o(){return(0,i.jsx)("code",{children:"EZsite"})}},8453:(e,n,t)=>{t.d(n,{R:()=>l,x:()=>c});var i=t(6540);const o={},s=i.createContext(o);function l(e){const n=i.useContext(s);return i.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function c(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(o):e.components||o:l(e.components),i.createElement(s.Provider,{value:n},e.children)}},9427:(e,n,t)=>{t.d(n,{A:()=>i});const i=t.p+"assets/images/googlelogin-create-credentials-9b4f9bb82539ed03318c8ff184b2c5a9.png"}}]);