2017-10-18 114 views
0

我想实现谷歌和脸书注册在同一页面上,但我无法这样做,我做了很多谷歌,但无法找到答案。Firebase实施谷歌和脸书登录在同一页

任何人都可以提供我在同一页面上实现的谷歌和脸书注册的样本吗?

+1

如果你是在Android中,使用火力-UI库 – faruk

回答

0

这是我们几个月前解决的复杂问题。 您必须根据注册的不同凭据合并您的帐户。您可以将已从Google/Facebook获得的凭证与已登录的帐户合并。如果您不打算提供任何其他选择以登录Google/Facebook,则只有一个选项可以允许来自控制台的具有相同电子邮件地址的多个帐户。

+0

嘿,我不想链接身份验证提供者,而是同一页上,并实现我发现他们unclicable你可以在 链接检查后 HTTP使用它们:/ /iitm.000webhostapp.com/login.php –

+0

我的代码http://iitm.000webhostapp.com/123.txt –

+0

您是否尝试过实现一个提供者?它对你有用吗? 如果是,那么只需考虑您使用哪个函数进行登录,现在您有两个相同的名称函数。 – iiylll

0

该示例适用于Angular/Ionic。 你需要在HTML两个按钮:

<button ion-button outline (click)="loginWithFacebook()"> 
    <svg ngClass="svgIcon-use" width="25" height="25" viewBox="0 0 25 25"> 
     <path d="M21 12.646C21 7.65 16.97 3.6 12 3.6s-9 4.05-9 9.046a9.026 9.026 0 0 0 7.59 8.924v-6.376H8.395V12.64h2.193v-1.88c0-2.186 1.328-3.375 3.267-3.375.93 0 1.728.07 1.96.1V9.77H14.47c-1.055 0-1.26.503-1.26 1.242v1.63h2.517l-.33 2.554H13.21V21.6c4.398-.597 7.79-4.373 7.79-8.954"></path> 
    </svg> 
    Facebook 
</button> 

<button ion-button outline (click)="loginWithGoogle()"> 
    <svg ngClass="svgIcon-use" width="25" height="25" viewBox="0 0 25 25"> 
     <g fill="none" fill-rule="evenodd"> 
     <path d="M20.66 12.693c0-.603-.054-1.182-.155-1.738H12.5v3.287h4.575a3.91 3.91 0 0 1-1.697 2.566v2.133h2.747c1.608-1.48 2.535-3.65 2.535-6.24z" 
      fill="#4285F4"></path> 
     <path d="M12.5 21c2.295 0 4.22-.76 5.625-2.06l-2.747-2.132c-.76.51-1.734.81-2.878.81-2.214 0-4.088-1.494-4.756-3.503h-2.84v2.202A8.498 8.498 0 0 0 12.5 21z" 
      fill="#34A853"></path> 
     <path d="M7.744 14.115c-.17-.51-.267-1.055-.267-1.615s.097-1.105.267-1.615V8.683h-2.84A8.488 8.488 0 0 0 4 12.5c0 1.372.328 2.67.904 3.817l2.84-2.202z" 
      fill="#FBBC05"></path> 
     <path d="M12.5 7.38c1.248 0 2.368.43 3.25 1.272l2.437-2.438C16.715 4.842 14.79 4 12.5 4a8.497 8.497 0 0 0-7.596 4.683l2.84 2.202c.668-2.01 2.542-3.504 4.756-3.504z" 
      fill="#EA4335"></path> 
     </g> 
    </svg> 
    Google 
</button> 

Login.ts

loginWithFacebook(): void { 
    this.afAuth.auth.signInWithPopup(new firebase.auth.FacebookAuthProvider()) 
     .then(_ => this.navCtrl.setRoot('HomePage')) 
     .catch(error => alert(error)); 
} 

loginWithGoogle(): void { 
    let provider = new firebase.auth.GoogleAuthProvider(); 
    provider.addScope('https://www.googleapis.com/auth/plus.login'); 
    return this.afAuth.auth.signInWithPopup(provider) 
     .then(_ => this.navCtrl.setRoot('HomePage')) 
     .catch((error) => alert(error)); 

} 
+0

无法登录到两个不同的帐户? – iiylll

+0

我想在网站上实现它,所以我可以使用角度/图标 –

+0

这只是一个例子,你可以在Angular中实现它。 –

0

我建议使用FirebaseUI。它为您处理所有边缘案例,使用起来非常简单。在某些情况下,您可以使用Google登录,然后使用同一封电子邮件在Facebook上登录。帐户链接将需要合并这两个帐户。