如何将Google、Facebook、Yahoo等社交登录服务添加到我的网站上？

Question

我想在我的网站上添加以下按钮，为用户提供使用更多服务（如Google、Facebook等）登录的选项。

请回答以下问题：

1. 我如何可以免费添加各种服务？（请注意，我不想使用像Janrain这样的付费服务）
2. 我如何将用户信息（如电子邮件、电话号码）存储到我的数据库中？
3. 请提供可以使用的任何链接/库。

非常感谢您能提供的任何其他信息。

- sumit

Answer 1

您将使用各个服务的API（如Google、Facebook、Twitter），或者如果计划添加OpenID，也可以使用OpenID。

一些链接：

http://code.google.com/apis/accounts/docs/OpenID.html

https://developers.facebook.com/docs/authentication/

http://dev.twitter.com/pages/auth

http://openid.net/add-openid/

也可以看看这里。 在SO上已经有几个类似的问题，检查右侧的相关问题。

- Atul Goyal

Answer 2

针对Google

将Google Sign-In集成到您的Web应用程序中

创建Google Developers控制台项目和客户端ID。

加载Google平台库

您必须在集成Google Sign-In的Web页面上包含Google平台库。

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

指定您的应用程序的客户端ID

使用 google-signin-client_id 元素，在 Google 开发者控制台中指定您为应用程序创建的客户端ID。

<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">

注意：您还可以使用gapi.auth2.init()方法的client_id参数来指定应用程序的客户端ID。

添加Google登录按钮

将Google登录按钮添加到您的网站上最简单的方法是使用自动生成的登录按钮。只需几行代码，您就可以添加一个按钮，它会自动配置自身以具有适当的文本、标志和颜色，以适应用户的登录状态和您请求的作用域。

要创建一个使用默认设置的Google登录按钮，请在您的登录页面上添加一个带有g-signin2类的div元素：

<div class="g-signin2" data-onsuccess="onSignIn"></div>

更多信息请查看此处

。

- KhogaEslam