[OAuth2] JavaScript만으로 'Qiita API v2' 인증 처리
소스 코드 htps : // 기주 b. 코 m / 모후 001 / 쿠타 타우 th
인증 처리 및 OAuth2
웹 애플리케이션에서는 사용자 인증에 OAuth2가 사용되는 것이 증가하고 있습니다. 각 앱이 비밀번호를 관리하지 않아도 된다는 장점은 있습니다만, 인증을 돌파하고 토큰을 받기까지의 순서가 나름대로 귀찮습니다. 이번에는 그것을 최소한의 JavaScript만으로 간단히 써 보겠습니다.
Qiita API v2에 액세스
사전 처리
애플리케이션을 등록해야 합니다.
htps : // 코 m / 세친 gs / 아 p ぃ 카치 온 s
품목
내용
애플리케이션 이름
좋아하는 이름
애플리케이션 설명
선택
웹사이트 URL
설치 장소
리디렉션 대상 URL
설치 장소
프로그램 처리
처리 순서는 다음과 같은 흐름이 됩니다.
1. API 액세스에 필요한 토큰을 보유하고 있지 않으면 인증 페이지로 전환
2. 인증 후 토큰 발행에 필요한 CODE를 받는다
3. CODE와 비밀을 이용하여 토큰을 발행하여 세션에 저장
4. 토큰을 사용하여 API 호출
이것을 JavaScript로 작성합니다.
최대의 문제는 서버 측 프로그램을 개재시키지 않기 때문에, 시크릿이 숨기지 않는 것으로.
그러나 모바일 앱을 만드는 경우도 닮은 상황이므로 신경이 쓰이면 지는 것입니다.
소스 코드
index.html<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<script type="text/javascript" src="Main.js"></script>
<title>QiitaAPIv2の認証TokenをJavaScriptのみで取得する</title>
</head>
<body>
</body>
</html>
Main.js(function(){
var ClientID = "発行されたID";
var ClientSecret = "発行されたシークレット";
var ClientScope = "read_qiita"; //権限は必要に応じて
var ClientStat = "ABC"; //これは適当な文字列でOK
//最初に実行するファンクションを設定
document.addEventListener("DOMContentLoaded",onLoad);
//Json形式のデータを送る
function postJson(url,param,proc) {
var xmlHttp = new XMLHttpRequest();
xmlHttp.open('POST', url, true);
xmlHttp.setRequestHeader("Content-Type", "application/json");
xmlHttp.onreadystatechange = function (){
if(this.readyState == 4){
proc(JSON.parse(xmlHttp.response));
}
}
var p = JSON.stringify(param);
xmlHttp.send(p);
}
//Json形式のデータを受け取る
function getJson(url,token,proc) {
var xmlHttp = new XMLHttpRequest();
xmlHttp.open('GET', url, true);
xmlHttp.setRequestHeader('Authorization', 'Bearer ' + token);
xmlHttp.onreadystatechange = function (){
if(this.readyState == 4){
proc(JSON.parse(xmlHttp.response));
}
}
xmlHttp.send();
}
//Token取得処理
function getToken(func){
//セッションに保存済みか確認
var token = sessionStorage.getItem("TOKEN");
if(token != null){
func(token); //Token取得後の処理へ
return;
}
//パラメータの取得
var p = {};
location.search.substring(1).split('&').forEach(function(v){s=v.split('=');p[s[0]]=s[1];});
//CODEが送られてきているか？
if(p.code != null && p.state == ClientStat){
//パラメータがみっともないのでURLから取り除く
history.replaceState(null,null,'?');
//トークンを取得
postJson("https://qiita.com/api/v2/access_tokens",
{client_id:ClientID,client_secret:ClientSecret,code:p.code},
function(e){
sessionStorage.setItem("TOKEN",e.token); //セッションに保存
func(e.token); //Token取得後の処理へ
});
}else{//認証サイトへ遷移
location.href = "https://qiita.com/api/v2/oauth/authorize?client_id="+
ClientID+"&scope="+ClientScope+"&state="+ClientStat;
}
}
//ページが読み込まれた際に最初に呼び出される
function onLoad(){
//トークンの要求
getToken(function(token){
//トークンをテストするため、ユーザ情報を取得して表示
getJson("https://qiita.com/api/v2/authenticated_user",token,function(r){
var table = document.createElement('table');
table.border = "1";
Object.keys(r).forEach(function(key){
var row = table.insertRow(-1);
row.insertCell(-1).innerHTML = key;
row.insertCell(-1).innerHTML = r[key];
});
document.body.appendChild(table);
});
});
}
})();
실행 화면
인증
결과 표시
끝에
페이지 천이하지 않는 웹 시스템을 보급하기 위해 활동하고 있습니다만, OAuth2만은 다른 사이트를 개재시키기 때문에 천이시키지 않는 것은 무리였습니다. IFrame 따위로 빠져나가는 길을 찾은 적도 있습니다만, Microsoft나 Google에서 실험한 결과, 빠져나가는 길 체크가 일하고 있어, 모두 튕겨졌습니다. 할 수 없는 것은 포기할 수밖에 없습니다. 그 대신, 가능한 한 간단하게 실장하는 곳에 주안을 두었습니다.
JavaScript로 다양한 웹 서비스의 API를 이용하고 싶다. 그렇지만 OAuth2가 귀찮다고 생각하는 분의 참고가 되면 다행입니다.
Reference
이 문제에 관하여([OAuth2] JavaScript만으로 'Qiita API v2' 인증 처리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/SoraKumo/items/95bc5ed543e195cc2f7f
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
사전 처리
애플리케이션을 등록해야 합니다.
htps : // 코 m / 세친 gs / 아 p ぃ 카치 온 s
품목
내용
애플리케이션 이름
좋아하는 이름
애플리케이션 설명
선택
웹사이트 URL
설치 장소
리디렉션 대상 URL
설치 장소
프로그램 처리
처리 순서는 다음과 같은 흐름이 됩니다.
1. API 액세스에 필요한 토큰을 보유하고 있지 않으면 인증 페이지로 전환
2. 인증 후 토큰 발행에 필요한 CODE를 받는다
3. CODE와 비밀을 이용하여 토큰을 발행하여 세션에 저장
4. 토큰을 사용하여 API 호출
이것을 JavaScript로 작성합니다.
최대의 문제는 서버 측 프로그램을 개재시키지 않기 때문에, 시크릿이 숨기지 않는 것으로.
그러나 모바일 앱을 만드는 경우도 닮은 상황이므로 신경이 쓰이면 지는 것입니다.
소스 코드
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<script type="text/javascript" src="Main.js"></script>
<title>QiitaAPIv2の認証TokenをJavaScriptのみで取得する</title>
</head>
<body>
</body>
</html>
Main.js
(function(){
var ClientID = "発行されたID";
var ClientSecret = "発行されたシークレット";
var ClientScope = "read_qiita"; //権限は必要に応じて
var ClientStat = "ABC"; //これは適当な文字列でOK
//最初に実行するファンクションを設定
document.addEventListener("DOMContentLoaded",onLoad);
//Json形式のデータを送る
function postJson(url,param,proc) {
var xmlHttp = new XMLHttpRequest();
xmlHttp.open('POST', url, true);
xmlHttp.setRequestHeader("Content-Type", "application/json");
xmlHttp.onreadystatechange = function (){
if(this.readyState == 4){
proc(JSON.parse(xmlHttp.response));
}
}
var p = JSON.stringify(param);
xmlHttp.send(p);
}
//Json形式のデータを受け取る
function getJson(url,token,proc) {
var xmlHttp = new XMLHttpRequest();
xmlHttp.open('GET', url, true);
xmlHttp.setRequestHeader('Authorization', 'Bearer ' + token);
xmlHttp.onreadystatechange = function (){
if(this.readyState == 4){
proc(JSON.parse(xmlHttp.response));
}
}
xmlHttp.send();
}
//Token取得処理
function getToken(func){
//セッションに保存済みか確認
var token = sessionStorage.getItem("TOKEN");
if(token != null){
func(token); //Token取得後の処理へ
return;
}
//パラメータの取得
var p = {};
location.search.substring(1).split('&').forEach(function(v){s=v.split('=');p[s[0]]=s[1];});
//CODEが送られてきているか？
if(p.code != null && p.state == ClientStat){
//パラメータがみっともないのでURLから取り除く
history.replaceState(null,null,'?');
//トークンを取得
postJson("https://qiita.com/api/v2/access_tokens",
{client_id:ClientID,client_secret:ClientSecret,code:p.code},
function(e){
sessionStorage.setItem("TOKEN",e.token); //セッションに保存
func(e.token); //Token取得後の処理へ
});
}else{//認証サイトへ遷移
location.href = "https://qiita.com/api/v2/oauth/authorize?client_id="+
ClientID+"&scope="+ClientScope+"&state="+ClientStat;
}
}
//ページが読み込まれた際に最初に呼び出される
function onLoad(){
//トークンの要求
getToken(function(token){
//トークンをテストするため、ユーザ情報を取得して表示
getJson("https://qiita.com/api/v2/authenticated_user",token,function(r){
var table = document.createElement('table');
table.border = "1";
Object.keys(r).forEach(function(key){
var row = table.insertRow(-1);
row.insertCell(-1).innerHTML = key;
row.insertCell(-1).innerHTML = r[key];
});
document.body.appendChild(table);
});
});
}
})();
실행 화면
인증
결과 표시
끝에
페이지 천이하지 않는 웹 시스템을 보급하기 위해 활동하고 있습니다만, OAuth2만은 다른 사이트를 개재시키기 때문에 천이시키지 않는 것은 무리였습니다. IFrame 따위로 빠져나가는 길을 찾은 적도 있습니다만, Microsoft나 Google에서 실험한 결과, 빠져나가는 길 체크가 일하고 있어, 모두 튕겨졌습니다. 할 수 없는 것은 포기할 수밖에 없습니다. 그 대신, 가능한 한 간단하게 실장하는 곳에 주안을 두었습니다.
JavaScript로 다양한 웹 서비스의 API를 이용하고 싶다. 그렇지만 OAuth2가 귀찮다고 생각하는 분의 참고가 되면 다행입니다.
Reference
이 문제에 관하여([OAuth2] JavaScript만으로 'Qiita API v2' 인증 처리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/SoraKumo/items/95bc5ed543e195cc2f7f
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여([OAuth2] JavaScript만으로 'Qiita API v2' 인증 처리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/SoraKumo/items/95bc5ed543e195cc2f7f텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
