2019-05-14 如何使用 GitHub 账号登录？

---

一个特别简单的需求，开发一个使用 GitHub 登陆的功能。

如图：

TL;DR

1. 创建一个 firebase 项目
2. 注册一个 GitHub 应用
3. 代码示例

创建 firebase 项目

登录 https://console.firebase.google.com，并创建一个项目。 进入 Auth 菜单，启用 GitHub。

客户端 ID 和客户端密钥可以从 GitHub App 完成界面获取。

注册一个 GitHub 应用

进入 https://github.com/settings/applications/new

Homepage URL 和 Callback URL 填写 firebase 回调网址。如 https://xxx.firebaseapp.com/__/auth/handler

代码示例

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  let firebase = null;

  const [logined, setResult] = useState(false);

  useEffect(() => {
    firebase = window.firebase;
  });

  const handleLogin = () => {
    var provider = new firebase.auth.GithubAuthProvider();
    provider.addScope("repo");
    provider.setCustomParameters({
      allow_signup: "false"
    });
    firebase
      .auth()
      .signInWithPopup(provider)
      .then(function(result) {
        setResult("SUCCESS");
      })
      .catch(function(error) {
        setResult("FAIL");
      });
  };

  return (
    <div className="App">
      <h1>GitHub Login Example</h1>
      {!logined && <button onClick={handleLogin}>Sign in with GitHub</button>}
      {logined && "Logined"}
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

source code: https://codesandbox.io/s/zw27vrzpk3