Aurelia Google SignIn Button

Je viens de commencer à utiliser Aurelia et j'ai un problème avec Google Connexion. Il semble que je pourrais créer mon propre bouton Google, mais je préfère que ça marche de cette façon si c'est possible. Voici mon code:Aurelia Google SignIn Button

<script src="https://apis.google.com/js/platform.js" async defer></script> 
... 
<body aurelia-app="src/main"> 
... 
<span id="googleButtonPlaceholder" class="g-signin2" data-onsuccess="onSignIn"></span>

J'ai la configuration de la fonction dans ma classe Aurelia mais je ne sais pas si/comment je peux l'appeler. J'ai essayé ${onSignIn()} qui appelle juste la fonction quand il charge, ${onSignIn}, onSignIn(), onSignIn, data-onsuccess.bind="onSignin()" mais rien ne semble fonctionner. Est-il possible de transmettre la fonction Aurelia à l'attribut Google data-onsuccess?

En note, je change de Angular 1.5.8 où cela a fonctionné précédemment.

Source

2017-01-04 Maeglin Fefalas

Passer la référence de la fonction vous donne probablement des ajustements pour le moment car ce n'est pas une fonction définie globalement, donc google ne sait pas comment la localiser. –

Cela faisait partie du problème. Google chargé avant que le modèle chargé de sorte qu'il n'était pas encore défini. Merci pour votre commentaire. –

Voici un exemple: https://gist.run?id=5da90f48b43b9c5867c8d2ace0f6371f

app.html

<template> 
    <require from="google-signin-button"></require> 

    <google-signin-button success.call="signinSuccess(googleUser)" 
         error.call="signinError(error)"> 
    </google-signin-button> 

    <h1>${message}</h1> 
</template>

app.js

export class App { 
    message = 'Not signed in.'; 

    signinSuccess(googleUser) { 
    const name = googleUser.getBasicProfile().getName(); 
    this.message = `Signed in: ${name}`; 
    } 

    signinError(error) { 
    this.message = `Error: ${error}`; 
    } 
}

google-Signin-button.js

import {inject, noView, bindable} from 'aurelia-framework'; 

const googleSigninClientID = '927519533400-mfupo3lq9cjd67fmmvtth7lg7d8l50q9.apps.googleusercontent.com'; 

function preparePlatform() { 
    // https://developers.google.com/identity/sign-in/web/build-button 

    // The name of the global function the platform API will call when 
    // it's ready. 
    const platformCallbackName = 'setGooglePlatformReady'; 

    // An "API ready" promise that will be resolved when the platform API 
    // is ready. 
    const ready = new Promise( 
    resolve => window[platformCallbackName] = resolve); 

    // Inject the client id meta tag 
    const meta = document.createElement('meta'); 
    meta.name = 'google-signin-client_id'; 
    meta.content = googleSigninClientID; 
    document.head.appendChild(meta); 

    // Inject an async script element to load the google platform API. 
    // Notice the callback name is passed as an argument on the query string. 
    const script = document.createElement('script'); 
    script.src = `https://apis.google.com/js/platform.js?onload=${platformCallbackName}`; 
    script.async = true; 
    script.defer = true; 
    document.head.appendChild(script); 

    return ready; 
} 

const platformReady = preparePlatform(); 

@noView() 
@inject(Element) 
export class GoogleSigninButton { 
    @bindable success = googleUser => { }; 
    @bindable error = error => { }; 
    @bindable scope = 'profile email'; 
    @bindable theme = 'dark'; 
    @bindable width = 240; 
    @bindable height = 50; 

    constructor(element) { 
    this.element = element; 
    } 

    attached() { 
    platformReady.then(this.renderButton); 
    } 

    renderButton =() => { 
    gapi.signin2.render(this.element, { 
     scope: this.scope, 
     width: this.width, 
     height: this.height, 
     longtitle: true, 
     theme: this.theme, 
     onsuccess: googleUser => { 
     console.info(googleUser); 
     this.success({ googleUser }); 
     }, 
     onfailure: error => { 
     console.error(error); 
     this.failure({ error }); 
     } 
    }); 
    } 
}

Source

2017-01-04 18:56:57

Nous vous remercions de votre aide! C'est une bonne solution qui fonctionne! J'ai trouvé une autre façon de le faire en utilisant une approche légèrement différente qui ne nécessite toujours pas que je fasse mon propre bouton Google. J'ai fini par utiliser l'approche différente, mais la vôtre est une réponse parfaitement acceptable. –

Essayez data-onsuccess.call="onSignIn()".

Source

2017-01-04 16:57:58

Vous avez raison de dire que 'call' devrait être utilisé. J'ai effectivement essayé cela et mis par erreur "bind" dans mon post. Merci pour votre commentaire. –

@JeremyDanyow avait une grande réponse, mais après que je suis allé au lit et lire un peu plus sur Aurelia, je pensais d'une solution pour essayer avant de voir sa réponse, donc je pensais que je partagerais une autre approche pour les intéressé.

index.html

<main aurelia-app="src/main"> 
</main> 

<script src="https://apis.google.com/js/platform.js" async defer></script>

app.html

<template> 
    <span id="my-signin2"></span> 
    <!-- other stuff --> 
</template>

app.js

attached() { 
    this.render(); 
} 

render() { 
    gapi.signin2.render('my-signin2', { 
     'scope': 'profile email', 
     'theme': 'dark', 
     'onsuccess': this.onSuccess, 
     'onfailure': this.onFailure 
    }); 
} 

onSuccess(googleuser) { 
    let gUser = googleuser.getBasicProfile(), 
     id_token = googleuser.getAuthResponse().id_token; 
} 

onFailure(error) { 
    console.log(error); 
}

Cette approche diffère sli généralement à partir de ce que Google montre sur leur site web où ils vous donnent platform.js une fonction onload pour rendre le bouton. Au lieu de cela, je crée le bouton dans le modèle, puis une fois le modèle chargé, on appelle attached(), qui à son tour, appelle la fonction que j'aurais eu platform.js appeler onload.

Source

2017-01-05 04:52:49

Si vous n'utilisez pas le rappel onload, il existe une légère probabilité que la charge asynchrone du script api de la plateforme google ne soit pas terminée au moment de l'appel de la méthode attachée au composant. Il est peu probable que cela se produise, je suis sûr que le script API de Google se charge très rapidement. –

Vous avez raison. C'est quelque chose qui m'inquiétait, c'est pourquoi votre réponse est probablement la meilleure. Quelque chose que j'ai pensé essayait de mettre le script de Google en haut de la page et de le faire charger de manière synchrone. –

Aurelia Google SignIn Button

Répondre

Questions connexes