連環轟炸的 [GitHub API] Deprecation notice for authentication via URL query parameters

發表於 2020-02-06 分類於 Hexo

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你ヽ(・∀・)ﾉ

大概 109/02/02 開始我的信箱被連環轟炸一直收到 [GitHub API] Deprecation notice for authentication via URL query parameters，而這個主因其實是因為使用 Gitalk 所導致，所以這一篇就來紀錄一下該如何解決。

前言

問題

基本上一直收到以下這封信件

Hi @hsiangfeng,

On February 4th, 2020 at 05:58 (UTC) your application (Welcome.Web.World - blog) used its `client_id` and `client_secret` (with the User-Agent Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.117 Safari/537.36) as part of a set of query parameters to access an endpoint through the GitHub API:

Please use Basic Authentication instead as using OAuth credentials in query parameters has been deprecated.

Depending on your API usage, we'll be sending you this email reminder at most once every 3 days.
Just one URL that was accessed with a User-Agent combination will be listed in the email reminder, not all.

Visit https://developer.github.com/changes/2019-11-05-deprecated-passwords-and-authorizations-api/#authenticating-using-query-parameters for more information.

Thanks,
The GitHub Team

簡單來講就是不建議你在參數中使用 OAuth 的密鑰，因為這樣會暴露一些問題，所以 GitHub 認為這是危險的動作。

解決方法

基本上官方的 Issues 被轟炸了，也有人好心地提出解決方法

被轟炸的 Issues

只要使用這個人修改的 gitalk.min.js 基本上就可以了，所以你就直接下載下來然後放到 theme 底下的 source/lib 並建立一個 gitalk 資料夾放進去。

gitalk

修改模板

如果你跟我一樣是使用 Hexo NexT 7.1.0 那麼你可以試著參考以下動作修改。

首先打開 themes/hexo-theme-next-master/layout/_third-party/comments/gitalk.swig 檔案，然後修改下方的 new gitalk

var gitalk = new Gitalk({
    clientID: '{{ theme.gitalk.client_id }}',
    clientSecret: '{{ theme.gitalk.client_secret }}',
    accessToken: '{{ theme.gitalk.accessToken }}', # 增加這一行
    repo: '{{ theme.gitalk.repo }}',
    owner: '{{ theme.gitalk.github_id }}',
    admin: ['{{ theme.gitalk.admin_user }}'],
    id: md5(location.pathname),
    {% if theme.gitalk.language == '' %}
      language: window.navigator.language || window.navigator.userLanguage,
    {% else %}
      language: '{{ theme.gitalk.language }}',
    {% endif %}
    distractionFreeMode: '{{ theme.gitalk.distraction_free_mode }}'
  });
  gitalk.render('gitalk-container');

最後這邊打開模板的 _config.yml 增加 accessToken 欄位

gitalk:
  enable: true
  github_id: hsiangfeng # Github repo owner
  repo: hsiangfeng.github.io # Repository name to store issues
  client_id: # Github Application Client ID
  client_secret: # Github Application Client Secret
  accessToken:  # 非常重要
  admin_user: # GitHub repo owner and collaborators, only these guys can initialize github issues
  distraction_free_mode: true # Facebook-like distraction free mode
  # Gitalk's display language depends on user's browser or system environment
  # If you want everyone visiting your site to see a uniform language, you can set a force language value
  # Available values: en, es-ES, fr, ru, zh-CN, zh-TW
  language: zh-TW
  labels: Gitalk

然後底下還有一個地方要修正，我們要將我們剛剛新增的 gitalk.min.js 加入到 cdn 因為等一下 Hexo 生成會在我們自己目錄下

# 搜尋  gitalk & js-md5
# gitalk & js-md5
  # See: https://github.com/gitalk/gitalk, https://github.com/emn178/js-md5
  # Example:
  # gitalk_js: //cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js
  # gitalk_css: //cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css
  # md5: //cdn.jsdelivr.net/npm/js-md5@0/src/md5.min.js
  gitalk_js: /lib/gitalk/gitalk.min.js
  gitalk_css: //cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css
  md5: //cdn.jsdelivr.net/npm/js-md5@0/src/md5.min.js

修改主題以及建立 token

接下來進入 GitHub 的 Settings / Developer settings，建立一個 access token，權限可以不用填，接下來將取得的 token 填入到剛剛主題新增的 _config.yml 即可。

access token

結語

依照討論串講的，如果你流量太大的話，那麼使用這個方式是沒辦法完全解決的，但是一般的部落格是可以應付的，若沒有 accessToken 的話，一天最多 60 個請求，若有 accessToken 的話一天可以高達 5000 次。