Configurando o login social em seu template

Disponibilizamos um exemplo em nosso template padrão da implementação base para o login social do Facebook e Google, este exemplo pode ser acessado na branch login-social-google-facebook

Resumidamente o comportamento da integração com as plataformas pode ser alcançado utilizando um ou mais componentes que implementem os exemplos de SDK disponibilizados pela plataforma. O retorno das respectivas credenciais é então direcionado à nossas mutations de login social ((Facebook, Google).

{{##
		Description: Renders the social login buttons. The client id for the apps can be acessed
			from the admin configurations using the shopSettings query, usually called in 
			common.graphql
		Params:
			- facebook_app_id: the facebook app id that the button will refer to
			- google_client_id: the google client app id that the button will refer to
		Usage:
			social_login facebook_app_id: "1246781687868" google_client_id "****.****.apps.googleusercontent.com"
##}}
<div id="login-social" class="flex flex-row">
	<div id="fb-root"></div>
	<script async defer crossorigin="anonymous" 
		src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v17.0&appId={{facebook_app_id}}&autoLogAppEvents=1" 
		nonce="q5zuHEGH">
	</script>

	<div class="fb-login-button" 
	data-width="200" 
	data-size="medium" 
	data-button-type="" 
	data-layout="" 
	data-auto-logout-link="false" 
	data-use-continue-as="true" 
	data-onlogin='makeFacebookLogin()'></div>

	<script src="https://accounts.google.com/gsi/client" async defer></script>
	<div id="g_id_onload"
		data-client_id={{google_client_id}}
		data-callback="authGoogle">
	</div>
	<div class="g_id_signin" data-type="standard"></div>
</div>
	

<script>
	//Facebook events
	function makeFacebookLogin(){
		FB.login(statusChangeCallback.bind(this), { scope: 'public_profile,email' });
	}

	async function statusChangeCallback(response) {
		if (response.status === 'connected'){
			const queryResult = await client.query(
				`mutation LoginFacebook($facebookAccessToken: String) {  
					customerSocialLoginFacebook(facebookAccessToken: $facebookAccessToken) {
					token
					type
					validUntil
				}}`, {facebookAccessToken: response.authResponse.accessToken});
				
			console.log(queryResult.customerSocialLoginFacebook);
		}
		else
			window.alert('Não foi possível autenticar utilizando sua conta do Facebook.');
	}

	//Google events
	async function authGoogle(google_credentials) {
		const variables = {
			userCredential: google_credentials.credential
      };

		const queryResult = await client.query(
			`mutation LoginGoogle($userCredential: String) {  
				customerSocialLoginGoogle(userCredential: $userCredential) {
				token
				type
				validUntil
			}}`, variables);

		console.log(queryResult.customerSocialLoginGoogle);
	}
</script>

A configuração dos SDKs do Google e Facebook envolve a utilização dos IDs de aplicação das respectivas plataformas, que devem ser armazenados no painel do admin e acessados por meio da query ShopSettings. Para habilitar o acesso a esses valores nas páginas onde são necessários, adicione as linhas de código apropriadas ao seu arquivo common.graphql. Isso permitirá que suas páginas utilizem os IDs de API ao configurar os SDKs do Google e Facebook.

  (...)
	facebook_app_id: shopSettings(settingNames: "Facebook_Login_AppId") {
    name
    value
  }
  google_client_id: shopSettings(settingNames: "Google_Plus_Client_Id") {
    name
    value
  }
(...)