OAuth 인증 + Reactjs로 소셜 로그인 가져오기 단추!

소셜 로그인 버튼은 0부터 간단합니다(〃 50줄 코드). React.js에서 가져오는 방법

OAuth 인증을 사용하여 단순화OAuth.io.OAuth.IO는 170 이상 OAuth2입니다.0 아이디 제공업체(페이스북, 트위터, 구글, 링크디딘 등)가 특성을 파악해 바로 대응하고 싶은 각종 SNS 로그인 버튼을 만들 수 있다.문서와 SDK(소프트웨어 개발 세트)도 자바스크립트, NodeJS, PHP, iOS, 안드로이드를 대상으로 한다.
이번 보도는'Giithub'을 예로 들어 설명한다.

위의 단추를 사용하여 서비스 로그인 페이지로 가져옵니다.
사용자 이름과 비밀번호의 로그인 이외에 Giithub 계정의 로그인도 추가할 수 있습니다.
현재 많은 서비스들이 이런 SNS 계정을 도입해 로그인하고 있다.
여기서 버튼의 동작을 확인할 수 있습니다.
https://jsfiddle.net/4cztpg16/2/
가져오기 전 단계

React app 제작

React app에서 필요한 외부 소스 가져오기

OAuth.React app에 io 추가

Githubapp 생성

OAuth.IO 계정 만들기

OAuth.IO 계정에 연결

Step1.React App 제작

먼저 단일 페이지 기반 React 애플리케이션을 만듭니다.
create-react-app 매뉴얼을 사용합니다.
React.js 문서 여기 있습니다.
https://reactjs.org/docs/add-react-to-a-new-app.html

먼저 yarn을 설치한다.

// For macOS
$ brew install yarn

이미 React 응용 프로그램이 있는 사람은 두 번째 단계를 참조하십시오.앞으로 나가세요.

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


$ cd github-login-demo
$ yarn start 

Step2. React Apps에 외부 소스 추가

'Giithub login button'을 디자인하기 위해 안감bootstrap-social을 사용합니다.
이 총서에는 많은 소셜 버튼인 bootstrapFont Awesome과 CSS가 포함돼 있어 간단하게 소셜 버튼을 표시할 수 있다.

$ yarn add bootstrap-social

Step3. React App의 OAuth도입

App.다음 코드를 js에 기술하고 "Sign in with Github"단추를 표시합니다.

'YOUR_OAUTH_API_5단계 KEY'.OAuth.IO 계정을 만들 때 표시되는 APIkey로 바꾸십시오.

: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 {

  // oauth.jsをCDNからダウンロードする。（外部のスクリプトを追加するのと同じように出来ます。）
  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) {
    // ページのリロードを防止する。
    e.preventDefault();

    //　　API keyを使ってOAuth.ioを初期化する。
    // OAuth.io登録後にメモした、あなたのAPIkeyを'YOUR_OAUTH_API_KEY'に記入します。
    window.OAuth.initialize('YOUR_OAUTH_API_KEY');

    // ポップアップウインドウを表示し、Githubの承認する。
    window.OAuth.popup('github').then((provider) => {

      // 'welcome'メッセージをユーザの名前と一緒に表示する。
      // 取得したユーザーのデータをコンソールで確認する。
      provider.me().then((data) => {
        console.log("data: ", data);
        alert("Welcome " + data.name + "!");
      });

      // また、.get()にてGithub's APIから取得も出来ます。
      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;

아니면, OAuth.ion은 npmJS를 지원하지 않기 때문에 componentDidMount () function을 사용하여 CDN 파일을 읽습니다.
웹팩 사용 시external도 대용할 수 있다.

프로그램을 실행하십시오

$ yarn start

Step4. 지허바프 만들기, 오옥스.IO 계정에 연결

여기서 Giithub 개발자용 OAuth 앱을 간단하게 제작할 수 있다.
' https://github.com/settings/applications/new '

Authorization 콜백 URL에 "https://oauth.io/auth"을 입력하십시오.

모두 작성하고 "Register Application"을 클릭

응용 프로그램이 순조롭게 등록되었다.

표시된 Celient ID, Celient Secret을 기록합니다.

Step5. OAuth.IO 계정 생성 및 APIkey 가져오기

애니메이션으로 다음 단계 확인

OAuth.io의 계정 생성 https://oauth.io/signup

에 서명하면 마스터 대시보드가 표시됩니다.

3단계 애플의 퍼블릭 키

.App.js의 YOUROAUTH_API_KEY에 써주세요.

화면 왼쪽의 Integrated API

를 클릭합니다.

Integrated APIs 화면 오른쪽에 표시되는 "+Add APIs"를 클릭합니다.

Adda provider to your app에는 사용 가능한 서비스가 표시됩니다.

Giithub 클릭

Giithub에 기록된 "Client ID", "Client Secret"을 "client"로 설정id','client_각각 기입하다.

'scope'에'user'라고 적으세요.

작성 후 "Save change"

클릭

"Try Auth"버튼 클릭

Giithub의 인증 화면으로 이동합니다.

라이센스를 받으려면 Authorize를 클릭합니다.

Giithub과의 합작이 성공하면 다음과 같은 팝업이 표시됩니다.
　a. oauth.IO API Key 릴리즈;이 Key에 따르면 oauth.io에 설정된 모든 파트너를 방문할 수 있습니다
b. 코드스니 애완동물을 복제하여 "Giithub 등록"단추를 사용하고 싶은 곳에 붙여넣습니다.
c.Giithub의 응답을 확인할 수 있습니다.
d. 응답을 통해 가져온 Javascript 객체의 자세한 사용 방법

이렇게 하면 Giithub 로그인 단추를 서비스에 가져올 수 있습니다.
이번 보도는 앞부분만 설명했다.지금 모습대로라면 백엔드는 앞부분이 무엇을 하고 있는지 모른다.따라서 백엔드 컨트롤러에 코드를 추가해야 한다.여기서SDK 확인할 수 있는 문서입니다.