Google和facebook登录

准备工作是你要在官网创建应用，获取它们给你的id

Google 登录

1，在google开发者后台创建应用
2，通过后台进行申请获取id

最近在试着用google登录，当然这只是简单的登录，直接用的它的官方文档给出的代码。上线以后才能实现，还要用https链接才行，不然会认为你的链接不安全。有可能会被阻止。

1.先引入官方的js文件

<meta name="google-signin-client_id" content="Client ID"><script src="https://apis.google.com/js/platform.js" async defer></script>

2.再放入代码

 <div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark"></div><script>function onSignIn(googleUser) {// Useful data for your client-side scripts:var profile = googleUser.getBasicProfile();console.log("ID: " + profile.getId()); // Don't send this directly to your server!console.log('Full Name: ' + profile.getName());console.log('Given Name: ' + profile.getGivenName());console.log('Family Name: ' + profile.getFamilyName());console.log("Image URL: " + profile.getImageUrl());console.log("Email: " + profile.getEmail());// The ID token you need to pass to your backend:var id_token = googleUser.getAuthResponse().id_token;console.log("ID Token: " + id_token);}
</script>

Facebook 登录

准备工作

1，https://developers.facebook.com/?no_redirect=1
登录你的账号

2.要把它打开
3，在这里可以设置一些东西

和google差不多，它也是在上线环境下，也必须是https才行，它比google更严格。它不在https下就会被阻止，而google有时是会登陆上的。

1，这里在js代码里加入了js文件。

function statusChangeCallback(response) {  // Called with the results from FB.getLoginStatus().console.log('statusChangeCallback');console.log(response);                   // The current login status of the person.if (response.status === 'connected') {   // Logged into your webpage and Facebook.testAPI();  } else {                                 // Not logged into your webpage or we are unable to tell.document.getElementById('status').innerHTML = 'Please log ' +'into this webpage.';}}function checkLoginState() {               // Called when a person is finished with the Login Button.FB.getLoginStatus(function(response) {   // See the onlogin handlerstatusChangeCallback(response);});}window.fbAsyncInit = function() {FB.init({appId      : 'APP ID',cookie     : true,                     // Enable cookies to allow the server to access the session.xfbml      : true,                     // Parse social plugins on this webpage.version    : '版本号，我填的是v5.0'           // Use this Graph API version for this call.});FB.getLoginStatus(function(response) {   // Called after the JS SDK has been initialized.statusChangeCallback(response);        // Returns the login status.});};(function(d, s, id) {                      // Load the SDK asynchronouslyvar js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;js.src = "https://connect.facebook.net/en_US/sdk.js";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));function testAPI() {                      // Testing Graph API after login.  See statusChangeCallback() for when this call is made.console.log('Welcome!  Fetching your information.... ');FB.api('/me', function(response) {console.log('Successful login for: ' + response.name);console.log(response,'====================1')document.getElementById('status').innerHTML ='Thanks for logging in, ' + response.name + '!';});}</script><fb:login-button scope="public_profile,email" onlogin="checkLoginState();"></fb:login-button><div id="status"></div>

Google和facebook登录相关推荐

Android 集成google 和 facebook 登录
最近公司项目刚好集成了google 和 facebook 登录,中间遇到了一些问题,所以记录下来. 主要问题如下: 1)如何集成google 和 facebook 登录,主要参考官方文档. 2)应用上 ...
Android 集成原生google，facebook 登录分享sdk
前言海外版app集成三方登录分享,早期采用umeng sdk,由于googleplay对用户隐私及用户数据的使用有比较严格规定.正好 umeng sdk会后台采集app信息,触发用户隐私相关政策条款 ...
【IOS】Firebase（Google、Facebook、Apple、Guest）登录，FCM，Apple In-App，Kakao
写在开头记录自己接入SDK的过程.请各位指正. 最好提前做的工作工欲善其事,必先利其器. 1.Mac电脑因Xcode而内存越来越大弄到一半突然提示我内存不足,而且xcode还越来越卡.也是醉了. ...
Android中使用Kotlin实现Google、FaceBook、Twitter登录的封装
最近由于项目做国际化,所以需要接入Google.FaceBook.Twitter等各种第三方登录的Api,于是查找官网资料,申请各种key和密钥,最后成功完成了这三个第三方登录Api的功能,但是由于很 ...
（unity）新手接入Facebook登录，分享以及google登录，Android，IOS，OC接入篇
最近接Android,IOS的Facebook登录,分享以及Google登录,分享流程以及遇到的问题整理. 一. Android接入 google登录第一步,前往 [ firebase] http ...
Google及Facebook第三方登录问题，“将你登入到此应用时出错，请稍后再试”
最近项目需求,需要加上Google及Facebook的第三方登录功能.在根据官方文档按步骤完成配置后,在真机上测试正常. Google登录官方指导文档:https://developers.googl ...
踩坑-helloJs实现google、facebook、twitter等第三方登录
在项目中我们经常会用到第三方登录,但是每个第三方都有自己的api,hellojs解决了这一个难题,上手很简单,它把国际上的一些登录api都封装在了一起,但是必须要注意里面的一些坑,代码片段注释和文章粗 ...
前端学习——第三方登录（Google登录、Facebook登录）
文章目录前言一.前端对接第三方登录有什么用? 二.使用环境三.FB第三方登录引入且封装成组件四.G第三方登录引入且封装成组件五.页面上使用总结前言本文介绍了作者本人学习前端Java ...
Google登录和facebook登录相关
1:google登录 google登录和Facebook登录都是提供的自定义view按钮: <com.google.android.gms.common.SignInButtonandroid: ...

Google和facebook登录

Google 登录

Facebook 登录

准备工作

Google和facebook登录相关推荐

最新文章

热门文章