要件：ユーザー登録にサイト上の記事、レビュー記事を確認し、ログインし、そこから取り出し、その後どのようにこの厄介なステップにしたいですか？答えは、第三者がログインを許可することです。この記事では、githubのは、チュートリアルのログインを許可説明することです。
経験住所の効果：http://biaochenxuying.cn
1. githubの第三者がチュートリアルをログに記録する権限
githubのを初めて目には、フルフロー・チャート1を承認しました：
または完全な承認はgithubのスキーム2を見て：
1.1のOAuthアプリケーションを適用
まず、次の手順を実行し、OAuthのアプリケーションに適用されますgithubの上でログインする必要があります。
- githubのログイン
- >開発者の設定新しいOAuthのアプリケーションの右側 - 絵の下に設定]をクリックします
- アプリケーションのアプリの設定を記入し、二つの重要な設定項目があります
- ホームページのURLこれは、認証URLを必要とし、あなたのプロジェクトのルートディレクトリのアドレスということを理解することができ、フォローアップです
- コールバックアドレスは認証コールバックURL承認を使用すると、認証コードコールバックアドレスを取得するために、これは、これは非常に重要です、成功しています。
次のように具体的な実践は、以下のとおりです。
-
- まず、あなたGitHubのアカウントにログインし、[設定]を入力します。
-
- OAuthのアプリをクリックして、新しいアプリケーションや新しいOAuthのアプリケーションを登録します。
-
- 情報を入力します。
-
- アプリケーション情報は、以下に説明します。
-プロセスは、公式文書GitHubのセットを参照することができOAuthのアプリを登録します。
1.2認証ログイン
githubの文档：建物のOAuth-アプリケーション/許可-のOAuth-アプリケーション
認証でログインするための3つの主要なステップ：
-
- ウェブ側リダイレクトhttp://github.com/login/oauth/authorize
-
- access_tokenはコードを取得するために応じて
-
- ユーザ情報access_tokenはを取得するために応じて
第二工程及び第三工程は、インタフェースの第二の側面は、このパラメータをClient_secret必要があるため、後端に実現され、第一されている間、この練習の著者は、前後の使用は、フロントエンドで実装プロジェクト別、最初のステップを終了します情報への3段階のユーザアクセスは、バックエンドデータベースに格納されています。
1.3コードの実装
1.3.1フロントエンド
プロジェクトの著者は、技術的に反応しています。
// config.js
// ***** 处请填写你申请的 OAuth App 的真实内容
const config = {
'oauth_uri': 'https://github.com/login/oauth/authorize',
'redirect_uri': 'http://biaochenxuying.cn/',
'client_id': '*****',
'client_secret': '*******',
};
// 本地开发环境下
if (process.env.NODE_ENV === 'development') {
config.redirect_uri = "http://localhost:3001/"
config.client_id = "******"
config.client_secret = "*****"
}
export default config; REDIRECT_URIコールバックアドレスは、分割された環境なので、私は2つのOAuthアプリケーション、ローカルの開発環境のためのオンライン本番環境のための1つを構築しました。
一般的には、ログインページには、各ルーティング/ログインに対応し、独立していなければならないが、このプロジェクトは、ログインコンポーネントサブアセンブリの構成部品をログインすることですNAV、NAVは、グローバルなコンポーネントであるため、コールバックアドレスを書くことにhttp：// biaochenxuying.cn/。
- だから、ジャンプが内部login.jsで書かれているクリックしてください。
- フィニッシュ後nav.jsで書かれている認証コードを取得するには
- コード値のバックエンドインターフェイスを取得するためのnav.js要求は、バックエンドのインターフェイスは、ユーザーに関する情報を戻します。
- ユーザ情報githubのを取得するために取らaccess_tokenは、前記リアコードの端部だけでなく、githubのaccess_tokenはテイクを得るためには、次に記載の方法。
// login.js
// html
<Button
style={{ width: '100%' }}
onClick={this.handleOAuth} >
github 授权登录
</Button>
// js
handleOAuth(){
// 保存授权前的页面链接
window.localStorage.preventHref = window.location.href
// window.location.href = 'https://github.com/login/oauth/authorize?client_id=***&redirect_uri=http://biaochenxuying.cn/'
window.location.href = `${config.oauth_uri}?client_id=${config.client_id}&redirect_uri=${config.redirect_uri}`
}// nav.js
componentDidMount() {
// console.log('code :', getQueryStringByName('code'));
const code = getQueryStringByName('code')
if (code) {
this.setState(
{
code
},
() => {
if (!this.state.code) {
return;
}
this.getUser(this.state.code);
},
);
}
}
componentWillReceiveProps(nextProps) {
const code = getQueryStringByName('code')
if (code) {
this.setState(
{
code
},
() => {
if (!this.state.code) {
return;
}
this.getUser(this.state.code);
},
);
}
}
getUser(code) {
https
.post(
urls.getUser,
{
code,
},
{ withCredentials: true },
)
.then(res => {
// console.log('res :', res.data);
if (res.status === 200 && res.data.code === 0) {
this.props.loginSuccess(res.data);
let userInfo = {
_id: res.data.data._id,
name: res.data.data.name,
};
window.sessionStorage.userInfo = JSON.stringify(userInfo);
message.success(res.data.message, 1);
this.handleLoginCancel();
// 跳转到之前授权前的页面
const href = window.localStorage.preventHref
if(href){
window.location.href = href
}
} else {
this.props.loginFailure(res.data.message);
message.error(res.data.message, 1);
}
})
.catch(err => {
console.log(err);
});
}1.3.2バックエンド
プロジェクトで使用されるバックエンド技術は、著者のNode.jsと急行です。
- フロントエンド後端部には、コードを送信しますが、また、情報のgithubのに従って、access_tokenはを取得するには、その後、githubのaccess_tokenは取るユーザーを取ります。
- そして、途中でデータベースに保存されているユーザ登録情報を使用して、フロントエンドユーザー情報に戻ります。
// app.config.js
exports.GITHUB = {
oauth_uri: 'https://github.com/login/oauth/authorize',
access_token_url: 'https://github.com/login/oauth/access_token',
// 获取 github 用户信息 url // eg: https://api.github.com/user?access_token=******&scope=&token_type=bearer
user_url: 'https://api.github.com/user',
// 生产环境
redirect_uri: 'http://biaochenxuying.cn/',
client_id: '*****',
client_secret: '*****',
// // 开发环境
// redirect_uri: "http://localhost:3001/",
// client_id: "*****",
// client_secret: "*****",
};// 路由文件 user.js
const fetch = require('node-fetch');
const CONFIG = require('../app.config.js');
const User = require('../models/user');
// 第三方授权登录的用户信息
exports.getUser = (req, res) => {
let { code } = req.body;
if (!code) {
responseClient(res, 400, 2, 'code 缺失');
return;
}
let path = CONFIG.GITHUB.access_token_url;
const params = {
client_id: CONFIG.GITHUB.client_id,
client_secret: CONFIG.GITHUB.client_secret,
code: code,
};
// console.log(code);
fetch(path, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(params),
})
.then(res1 => {
return res1.text();
})
.then(body => {
const args = body.split('&');
let arg = args[0].split('=');
const access_token = arg[1];
// console.log("body:",body);
console.log('access_token:', access_token);
return access_token;
})
.then(async token => {
const url = CONFIG.GITHUB.user_url + '?access_token=' + token;
console.log('url:', url);
await fetch(url)
.then(res2 => {
console.log('res2 :', res2);
return res2.json();
})
.then(response => {
console.log('response ', response);
if (response.id) {
//验证用户是否已经在数据库中
User.findOne({ github_id: response.id })
.then(userInfo => {
// console.log('userInfo :', userInfo);
if (userInfo) {
//登录成功后设置session
req.session.userInfo = userInfo;
responseClient(res, 200, 0, '授权登录成功', userInfo);
} else {
let obj = {
github_id: response.id,
email: response.email,
password: response.login,
type: 2,
avatar: response.avatar_url,
name: response.login,
location: response.location,
};
//注册到数据库
let user = new User(obj);
user.save().then(data => {
// console.log('data :', data);
req.session.userInfo = data;
responseClient(res, 200, 0, '授权登录成功', data);
});
}
})
.catch(err => {
responseClient(res);
return;
});
} else {
responseClient(res, 400, 1, '授权登录失败', response);
}
});
})
.catch(e => {
console.log('e:', e);
});
};githubの上の情報を取得するために、ユーザ、およびユーザテーブルに登録された、または別のOAuthマッピングテーブルを保存しているとして、あなたは自分のプロジェクトの状況を見ています。
以下に示すようにgithubのは、ユーザーからの情報を取得します：
正味の効果：
記事を参加：
2.第三者認証されたユーザのログインテーブルを設計する方法
第三者ユーザ情報のサードパーティの不正アクセスは、元のユーザー・データベース・テーブルまたは新しいテーブルに保管されている場合？
回答：これは、特定のプロジェクトに依存し、実践の様々な、以下を参照してください。
サードパーティがログオンすることを許可した後、サードパーティのユーザー情報が正常にのみ、具体的githubのは、IDなどの、第三者で何を見て、OpenIDのかunionidまたはIDサインインし、ユーザーに返されます
- 1.登録の仕方によって直接データベースに保存します
最初：サイトがあれば無許可に成功した後、直接、第3のユーザ情報への第三者による登録機能を直接不正アクセス、登録内のユーザーに、独自のデータベーステーブルを保存しました。典型的な例は、不正アクセスのマイクロチャネルパブリック数です。
第二は：サイトが場合がある登録機能を認証が成功した後、あなたもあなたも直接第3のユーザ情報にすることができ、認定された第三者経由でログインすることができ、登録、独自のデータベース内のユーザーテーブルに保存された（ただし、バックエンドのコードを自動的に生成されますユーザーは、知らないだけで、第三者でログオンすることを許可することができます）、同じテーブルで、このユーザーとネイティブの登録ユーザ情報などの第三者を、そしてこのような状況は、自分のプロジェクトの特定の状況に依存します。一時的にこのアプローチの使用上のブログサイトの作者。
- 2.マップを増やします
現実には、多くのサイトは、登録IDは、ウェブサイトを訪問使用するなど、複数のアカウントのログインを持って、あなたはまた、携帯電話番号を使用してログオンすることができます、あなたはQQとし、その上でログインすることができます。データベースのマッピング関係、QQ、電話番号などの登録IDサイトにマッピングされているがあります。それを確実にするためにどんな方法でログイン、ちょうどマッピング関係を確認するために、マッピングが成功したログインIDを聞かせてIDが登録ウェブサイト上で発見されませんでした。
- 3.記録されたユーザー・レジストリーIDに対応する、OAuthのテーブル、列IDを作成
OAuthのサードパーティのログインOpenIDのを記録し、その後、あなたはどのように作成するか、多くの列、サードパーティ製のサインオン機能の数を持って、列ID、ユーザー・レジストリーに対応するIDのレコードをテーブルを構築するには、インターフェイスを返され、第三者に着陸する際、によってこのレコードIDテーブルOpenIDが存在する場合、IDは、レジストリを読み、関連する情報のセッションを記録し、情報を入手します。これは、/ユーザーログインをリダイレクトopenidのバインドをサイト登録アカウントを入力するか、新たに登録されたアカウント情報をバインドするユーザーのためのインターフェイスを登録存在しません。
具体的なコーディングプラクティスは、記事を参照してください。
ユーザーデータベーステーブルの構造設計、サードパーティのログイン2.
4.最後に
githubのブログアドレスの著者：githubの
あなたはあなたを助けるために、この記事や良いを見つけた場合、私に星や詠唱賞賛を与える、あなたのポイントを称賛することは、私は最大の力を作成し続けるものです。