4

我想为我的网站添加一个只使用 JavaScript 和 HTML 的 twitter 登录功能。

可能吗 ？

4

4 回答 4

4

是和不是。

在撰写本文时，如果您只想使用浏览器客户端 javascript 执行此操作，这是不可能的，因为 twitter 不允许跨站点请求。

浏览器在沙盒环境中执行 javascript 代码，这不允许您向另一个域发出请求，除非第 3 方域明确允许。这称为Http 访问控制 (CORS)

然而，twitter api 当然可以由不在浏览器中运行的 javascript 应用程序使用。

因此，如果您想为您的网站使用此功能并且只想在 javascript 中对其进行编码，则必须在 nodejs 中为您的网站编写后端 api 或使用 @RationalDev 建议的其他 3rd 方服务

于 2016-06-21T08:07:30.003 回答
4

如果您指的是客户端上的仅 JavaScript 和 HTML，则有一些第三方库。

Auth0 很受欢迎，并且有Twitter 的说明。

另一种可能的解决方案是使用 Firebase 身份验证。它有一个JavaScript API，可以按如下方式使用：

创建 Twitter 提供者对象的一个​​实例：

var provider = new firebase.auth.TwitterAuthProvider();

使用 Twitter 提供程序对象向 Firebase 进行身份验证。您可以通过打开一个弹出窗口或重定向到登录页面来提示您的用户使用他们的 Twitter 帐户登录。

于 2016-06-21T08:14:41.613 回答
1

这个 javascript 片段是如何做到这一点的一个工作示例。您可以尝试并调整它：https ://jsfiddle.net/s3egg5h7/43/

正如所指出的，仅 Javascript 的解决方案需要第 3 方服务，在本例中为https://oauth.io。

即使您不想使用第 3 方服务，该代码段也很有用，因为您不必编写任何代码来测试 Twitter API 以查看它们返回您需要的内容

它很短：

$('#twitter-button').on('click', function() {
    // Initialize with your OAuth.io app public key
    OAuth.initialize('OAUTH_IO_KEY');
    // Use popup for OAuth
    OAuth.popup('twitter').then(twitter => {
        console.log('twitter:', twitter);
        // Retrieves user data from OAuth provider by using #get() and
        // OAuth provider url    
        twitter.get('/1.1/account/verify_credentials.json?include_email=true').then(data => {
            console.log('self data:', data);
        })    
    });
})

它需要一些外部引用，例如 bootstrap css、oauthio javascript 开源库等。

我认为使用第 3 方服务可能是有意义的，因为它隐藏了不同提供商（如 Twitter、Facebook 等）的 OAuth 实现中的所有不一致之处。

我没有创建此代码，因此出于归属目的，请参阅：https ://coderwall.com/p/t46-ta/javascript-twitter-social-login-button-for-oauth

于 2018-10-15T03:53:34.210 回答
0

如果您查看 twitter 的 api 文档，您可以看到如何进行登录。

我认为您的问题是如何插入与 facebook 类似的插件来登录，但我认为他们没有做任何库。

当用户单击登录按钮时，您必须向 twitter 发送一个 post 请求以获取 oauth_token： 示例：对“api.twitter.com/oauth/request_token”的 POST 请求

然后，twitter 为您提供 oauth_token 和 oauth_token_secret（私有）。

完成此步骤后，您必须将用户重定向到 Twitter。示例：对“api.twitter.com/oauth/authenticate?oauth_token=YOUR_OAUTH_TOKEN_GIVEN_IN_STEP_1”的 GET 请求

如果一切顺利，twitter 会使用 oauth_token 和验证者 oauth 令牌回复您。

让我们设置最后一步！

使用步骤 2 的响应中提供的验证者 oauth 令牌向 twitter api 端点发送一个发布请求。示例：向“api.twitter.com/oauth/access_token”发送一个验证者 oauth 令牌作为发布参数的 POST 请求。

然后使用秘密令牌和用户令牌进行 twitter 响应，您可以保存它并在任何 twitter 端点中随意使用它。

登录文档：https ://dev.twitter.com/web/sign-in/implementing 浏览器身份验证流程：https ://dev.twitter.com/web/sign-in/desktop-browser

问候！

于 2016-06-21T07:49:10.390 回答