gistの認証header 3種

basic、gisttoken、oauth。

 let u='gnjo',p='XXXXXXXXX'
 ,basic=`basic ${btoa(u+":"+p)}`
 ,gisttoken=`token a04f631c476b4b54e131XXXXXXXXXXXXXXXXXXX`
 ,oauth2=`bearer df6322210478ec2b91fb5XXXXXXXXXXXXXXXXXXX` 
 //getist token is https://github.com/settings/tokens
 //quick oauth2 is https://oauth.io/
 ; 

...
 ,opt={headers:{'authorization':authstr}}

oauthは特にアクセスするサイトも制限される、その分信頼性は高くなる。

oauthの認証フローは https://oauth.io/ を使うとoauth.ioに委ねることができ、chrome:extensionでも可能となる。

全部　

認証し、ユーザ情報を取得する。

<button onclick="a()">user</button>
<pre></pre>

let fn={}
fn.q=(d=>document.querySelector(d))
fn.jsy=(d=>JSON.stringify(d,null,2))
;
function user(authstr){
 let url='https://api.github.com/user'
 ,opt={headers:{'authorization':authstr}}
 ;
 return fetch(url,opt).then(d=>d.json())
}
;
function a(){
 let u='gnjo',p='XXXXXXXX'
 ,basic=`basic ${btoa(u+":"+p)}`
 ,gisttoken=`token a04f631c476b4b54e131XXXXXXXXXXXXXXXXXXX`
 ,oauth2=`bearer df6322210478ec2b91fb5XXXXXXXXXXXXXXXXXXX` 
 //getgist token is https://github.com/settings/tokens
 //quick oauth2 is https://oauth.io/
 ;
 let draw=(d=>{fn.q('pre').innerHTML=fn.jsy(d);return d})
 ,log=(d)=>{console.log(d);return d}
 ;
 user(basic).then(log).then(draw)
 //user(gisttoken).then(log).then(draw)
 //user(oauth2).then(log).then(draw)
}