"use strict";(self.webpackChunknewoaks_help=self.webpackChunknewoaks_help||[]).push([[7350],{270:(e,n,t)=>{t.d(n,{A:()=>i});const i=t.p+"assets/images/facebooklogin-click-business-verification-ec30e2eb6302a8db2ac180f2ce6a7d07.png"},608:(e,n,t)=>{t.d(n,{A:()=>i});const i=t.p+"assets/images/facebooklogin-click-dashboard-0d6ed3d4eaa0823bf5134ad7449cb27e.png"},974:(e,n,t)=>{t.d(n,{A:()=>i});const i=t.p+"assets/images/facebooklogin-set-redirect-url-14cb4026b9c8add46715f8c35b8f2bcd.png"},2619:(e,n,t)=>{t.d(n,{A:()=>i});const i=t.p+"assets/images/facebooklogin-click-facebooklogin-7566adcc6b5993afbfbf21f8b0e9b173.png"},2750:(e,n,t)=>{t.d(n,{A:()=>i});const i=t.p+"assets/images/facebooklogin-create-an-app-set-app-name-353e7076f077875d45e5783d1b796030.png"},2778:(e,n,t)=>{t.d(n,{A:()=>i});const i=t.p+"assets/images/facebooklogin-copy-facebook-redirect-url-1dd0d80c4814b92be67132e7a0798e48.png"},3454:(e,n,t)=>{t.d(n,{A:()=>i});const i=t.p+"assets/images/integration-click-settings-ad5aff24a260b49c708dad7641ed0773.png"},3815:(e,n,t)=>{t.d(n,{A:()=>i});const i=t.p+"assets/images/facebooklogin-copy-app-id-and-app-secret-60dabf659295e745198d303c0e432220.png"},6447:(e,n,t)=>{t.d(n,{A:()=>i});const i=t.p+"assets/images/facebooklogin-start-verification-f732dc3e5c05318d52e71ed53d963f4b.png"},6548:(e,n,t)=>{t.d(n,{A:()=>i});const i=t.p+"assets/images/integration-enable-ezsite-database-807cc7edce541362417f452d71192f25.png"},7004:(e,n,t)=>{t.d(n,{A:()=>i});const i=t.p+"assets/images/facebooklogin-input-app-id-and-app-secret-d1c04da6e050a437ae6e576fac93f778.png"},7245:(e,n,t)=>{t.d(n,{A:()=>i});const i=t.p+"assets/images/facebooklogin-enable-email-permission-6693f7158fd19ac9432cf857c72ac6c6.png"},7827:(e,n,t)=>{t.d(n,{A:()=>i});const i=t.p+"assets/images/facebooklogin-create-an-app-checked-authenticate-113e8e0c1796db897c35dc9aeebc30dc.png"},8175:(e,n,t)=>{t.d(n,{A:()=>s});t(6540);var i=t(4848);function s(){return(0,i.jsx)("code",{children:"EZsite"})}},8453:(e,n,t)=>{t.d(n,{R:()=>o,x:()=>c});var i=t(6540);const s={},a=i.createContext(s);function o(e){const n=i.useContext(a);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(s):e.components||s:o(e.components),i.createElement(a.Provider,{value:n},e.children)}},8485:(e,n,t)=>{t.d(n,{A:()=>i});const i=t.p+"assets/images/facebooklogin-create-an-app-select-business-ca0bea637c4f97700617f97878d50218.png"},8487:(e,n,t)=>{t.r(n),t.d(n,{assets:()=>l,contentTitle:()=>r,default:()=>h,frontMatter:()=>c,metadata:()=>i,toc:()=>d});const i=JSON.parse('{"id":"integration-facebooklogin","title":"Facebook Login Integration","description":"Set Facebook Login in EZsite","source":"@site/Integration/012.integration-facebooklogin.md","sourceDirName":".","slug":"/integration-facebooklogin","permalink":"/guides/integration/integration-facebooklogin","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":12,"frontMatter":{"sidebar_position":12},"sidebar":"sidebar","previous":{"title":"Google Login Integration","permalink":"/guides/integration/integration-googlelogin"},"next":{"title":"Clerk Integration","permalink":"/guides/integration/integration-clerk"}}');var s=t(4848),a=t(8453),o=t(8175);const c={sidebar_position:12},r="Facebook Login Integration",l={},d=[{value:"Set Facebook Login in EZsite",id:"set-facebook-login-in-ezsite",level:2},{value:"Integrate Facebook Login in project",id:"integrate-facebook-login-in-project",level:2}];function p(e){const n={a:"a",code:"code",h1:"h1",h2:"h2",header:"header",img:"img",li:"li",ol:"ol",p:"p",pre:"pre",...(0,a.R)(),...e.components};return(0,s.jsxs)(s.Fragment,{children:[(0,s.jsx)(n.header,{children:(0,s.jsx)(n.h1,{id:"facebook-login-integration",children:"Facebook Login Integration"})}),"\n",(0,s.jsx)(n.h2,{id:"set-facebook-login-in-ezsite",children:"Set Facebook Login in EZsite"}),"\n",(0,s.jsxs)(n.ol,{children:["\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:["In ",(0,s.jsx)(o.A,{}),', enter a project, click the "Settings" button in the top right corner to open the settings panel.']}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{alt:"click settings",src:t(3454).A+"",width:"554",height:"79"})}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsx)(n.p,{children:'In the settings panel, click on "Third-party Integration", then click the "Facebook Login" button to enter the Facebook Login settings page.'}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:["On the Facebook Login settings page, to enable Facebook login, you must first enable ",(0,s.jsx)(o.A,{}),' Database. Click the "Enable now" button to navigate to the Database tab.']}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{alt:"click facebook login",src:t(2619).A+"",width:"1011",height:"534"})}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsx)(n.p,{children:'On the Database settings page, click the "Enable Database" button, select "EZsite Database" for the Database Type, then click the "Save" button to save the settings.'}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{alt:"enable database",src:t(6548).A+"",width:"995",height:"455"})}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsx)(n.p,{children:'Return to the Third-party Integration tab, click the "Facebook login" button, and copy the Facebook Redirect URL, which will be used in step 8.'}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{alt:"copy facebook redirect url",src:t(2778).A+"",width:"999",height:"484"})}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:["Open the ",(0,s.jsx)(n.a,{href:"https://developers.facebook.com/apps/",children:"Facebook Developer"}),", create a new app."]}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.img,{alt:"set app name in create app",src:t(2750).A+"",width:"1083",height:"461"}),"\n",(0,s.jsx)(n.img,{alt:"checked authentication in create app",src:t(7827).A+"",width:"912",height:"773"}),"\n",(0,s.jsx)(n.img,{alt:"select business in create app",src:t(8485).A+"",width:"939",height:"447"})]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsx)(n.p,{children:'In the app, click the "Dashboard" button, click the "Customize adding a Facebook Login button" button'}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{alt:"click dashboard",src:t(608).A+"",width:"1270",height:"610"})}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsx)(n.p,{children:'Enable email permission in the "Permissions" tab.'}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{alt:"enable email permission",src:t(7245).A+"",width:"1510",height:"592"})}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsx)(n.p,{children:'Click "Settings", input the Facebook Redirect URL copied in step 5 in the "Valid OAuth Redirect URIs" field, then click the "Save changes" button.'}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{alt:"set redirect url",src:t(974).A+"",width:"1602",height:"855"})}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsx)(n.p,{children:"Verify your business."}),"\n",(0,s.jsxs)(n.p,{children:[(0,s.jsx)(n.img,{alt:"verify business",src:t(270).A+"",width:"1378",height:"496"}),"\n",(0,s.jsx)(n.img,{alt:"start verification",src:t(6447).A+"",width:"1417",height:"467"})]}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsx)(n.p,{children:"Submit app review."}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsx)(n.p,{children:'Return to the dashboard, click the "App settings"->"Basic" button in the left sidebar, copy the "App ID" and "App Secret".'}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{alt:"copy app id and app secret",src:t(3815).A+"",width:"1235",height:"806"})}),"\n"]}),"\n",(0,s.jsxs)(n.li,{children:["\n",(0,s.jsxs)(n.p,{children:["Return to the Facebook Login settings page in ",(0,s.jsx)(o.A,{}),', enter the "App ID" and "App Secret" copied in step 9, then click the "Save" button to save the settings.']}),"\n",(0,s.jsx)(n.p,{children:(0,s.jsx)(n.img,{alt:"input app id and app secret",src:t(7004).A+"",width:"973",height:"480"})}),"\n"]}),"\n"]}),"\n",(0,s.jsx)(n.h2,{id:"integrate-facebook-login-in-project",children:"Integrate Facebook Login in project"}),"\n",(0,s.jsx)(n.p,{children:"Use the following prompt to create a website with Facebook login."}),"\n",(0,s.jsx)(n.pre,{children:(0,s.jsx)(n.code,{children:"Create a Sudoku mini-game where users can login, register, and use Facebook login.\n"})})]})}function h(e={}){const{wrapper:n}={...(0,a.R)(),...e.components};return n?(0,s.jsx)(n,{...e,children:(0,s.jsx)(p,{...e})}):p(e)}}}]);