visão global

Este é um guia passo a passo simples com código de trabalho completo (<50 linhas) para criar um botão de login social no React do zero. Este tutorial usa um provedor OAuth chamado OAuth.io, que fornece mais de 100 provedores OAuth, como Twitter, Facebook, Google e muito mais. Eles também têm SDKs disponíveis para JavaScript, NodeJS, PHP, iOS, Android, conforme sua documentação.

Usaremos o "Sign in with Github"botão de login social como exemplo para este guia.

Resultado

“O que posso fazer com este botão?”

Você pode colocar isso em sua página de login como uma opção adicional ao nome de usuário e senha tradicionais.
Muitos aplicativos hoje em dia oferecem login social como forma de inscrição / login em seus sistemas, você já deve ter visto um!

Demonstração Online

Verifique o código de trabalho aqui: https://jsfiddle.net/nkd50mh3/

Sinta-se à vontade para brincar com o código imediatamente, ele já está implementado no JSFiddle!

Passos Gerais

1. Crie o aplicativo React.
2. Adicione dependências ao aplicativo React.
3. Integre OAuth.io com o aplicativo React.
4. Inscreva-se no OAuth.io para obter a chave API.
5. Crie um aplicativo do Google e vincule-o à sua conta OAuth.io.

Vamos começar!

1. Crie o aplicativo React

Vamos criar um aplicativo React de página única primeiro. Usaremos a biblioteca de acordo com a documentação oficial do ReactJS aqui: https://reactjs.org/docs/add-react-to-a-new-app.htmlcreate-react-app

Instale yarnse ainda não tiver feito isso.

// For macOS
$ brew install yarn

Se você já tem um aplicativo React, pule para a etapa 2.

$ npm install -g create-react-app
$ create-react-app github-login-demo

$ cd github-login-demo
$ yarn start

Agora temos um texto padrão do aplicativo React.

2. Adicionar dependências ao aplicativo React

Vamos usar a biblioteca para projetar nosso botão de login do Github. A biblioteca é construída usando puramente CSS no topo do bootstrap e Font Awesome . A biblioteca tem suporte para muitos outros botões sociais também!bootstrap-social

$ yarn add bootstrap-social

Isso instala as bibliotecas bootstrap, Font Awesome e bootstrap-social.

3. Integre OAuth.io com o aplicativo React

Modifique o App.js para exibir o componente de login do Twitter.

App.js

import React, { Component } from 'react';
import 'font-awesome/css/font-awesome.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap-social/bootstrap-social.css';

class App extends Component {

  // Downloads oauth.js from CDN, pretty much like adding external scripts
  componentDidMount () {
    const oauthScript = document.createElement("script");
    oauthScript.src = "https://cdn.rawgit.com/oauth-io/oauth-js/c5af4519/dist/oauth.js";

    document.body.appendChild(oauthScript);
  }

  handleClick(e) {
    // Prevents page reload
    e.preventDefault();

    // Initializes OAuth.io with API key
    // Sign-up an account to get one
    window.OAuth.initialize('BTfcjv51Sd9sJJrfLVp8QyIBZUM');

    // Popup Github and ask for authorization
    window.OAuth.popup('github').then((provider) => {

      // Prompts 'welcome' message with User's name on successful login
      // Check console logs for additional User info
      provider.me().then((data) => {
        console.log("data: ", data);
        alert("Welcome " + data.name + "!");
      });

      // You can also call Github's API using .get()
      provider.get('/user').then((data) => {
         console.log('self data:', data);
      });

    });
  }

  render() {
    return <a href="" onClick={this.handleClick.bind(this)} className="btn btn-social btn-github">
             <span className="fa fa-github"></span> Sign in with Github
           </a>;
  }
}

export default App;

Como OAuth.io ainda não está hospedado no npmJS, incluímos o CDN manualmente usando a função. Você também pode usar itens externos se estiver usando webpack em seu aplicativo React. Manteremos esta implementação para fins de demonstração.componentDidMount()

Rodar programa

Viola! Agora você tem um botão de Login do Github ativo no React.

$ yarn start

Observe que o snippet de código acima está usando minha própria chave de API OAuth.io pessoal.
Prossiga para a próxima etapa e inscreva-se no OAuth.io .

4. Inscreva-se no OAuth.io

Esta etapa deve ser bastante direta. Cadastre uma conta para OAuth.io e substitua a chave de API em .App.js

5. Crie um aplicativo Github, faça um link com seu OAuth.io

Criar aplicativo Github

O Github facilita a criação de um aplicativo de desenvolvedor OAuth.
Você pode criar um aqui: https://github.com/settings/applications/new

Defina "Authorization callback URL"como "https://oauth.io/auth".
Vou deixar o resto dos campos para você.

Em seguida, vá para ‘Configurações’ -> ‘Configurações do desenvolvedor’ e, em ‘Aplicativos OAuth’, clique no aplicativo que você criou. Isso fornecerá a você "Client ID"e o "Client Secret"qual usaremos para integração com OAuth.io na próxima etapa.

As instruções detalhadas passo a passo são (aqui) [ https://tome.oauth.io/create-github-application?utm_source=coderwall&utm_medium=post&utm_campaign=oauthio-reactjs ].

Link com seu OAuth.io

Por fim, vincule o aplicativo Github que você criou à sua conta OAuth.io.

Se você enfrentar alguns problemas nesta etapa, consulte (this) [ https://tome.oauth.io/setup-oauth-io-provider-integration?utm_source=coderwall&utm_medium=post&utm_campaign=oauthio-reactjs ].

É isso aí! Agora você tem seu próprio botão Github Social Login totalmente funcional.

Observe que esta é apenas uma implementação de front-end.
Você deve adicionar código adicional no lado do controlador para que seu aplicativo saiba o que fazer.
Você pode verificar diferentes SDKs de OAuth.io aqui .