內容目錄
歡迎回到鵠學苑～協助您架設網站的好去處！在今天的教學 WordPress Social Login 社交網站 帳號登入 / 快速註冊 的文章中，內容裡介紹的是 Social Login 社交登入 這一個實用的 WordPress 外掛。相信各位同學如果有常常在網路上瀏覽資訊或者逛購物網站，如果想要觀看更多網站(論壇?)內容或者在網站內購買商品，都會需要加入會員或者註冊帳號，因為這樣就必須在每一個新的網站內重複的輸入自己的基本資料或聯絡資訊，如果設定重複的帳號密碼會擔心被竊取，而設定太多組帳號密碼又不容易記得，同學們會不會也有一樣對於網站帳戶的管理有一樣的困擾呢?
身為一個專業的網站架設者，我們當然也要考慮到用戶最細微的心情(史提芬周評論陽泉大酒家的主廚….)，如果可以讓網站使用者不必輸入各種表格的基本資料，輕鬆按一個圖示就能使用 社交網站 帳號登入 以及 快速註冊，對於使用者瀏覽網站的體驗會有相當加分的效果，也能讓客戶更加的想要留在您的網站購買商品喔!我就不繼續賣關子拉~跟著鵠學苑的腳步，讓我們開始學習吧!
(小提醒：鵠學苑的所有教學均是以Apple Mac OS X系統 做步驟示範！)
Social Login下載點
https://wordpress.org/plugins/oa-social-login/
第一步:進入WordPress的後台介面，點擊外掛/安裝外掛選項，搜尋外掛將其安裝並啟用。可以參考之前的教學課程~ WordPress 教學 基礎介紹六（外掛）
第三步:在setup這個頁面裡主要是來連結到 oneall 這個網站來建立oneall 的帳戶以及申請API密鑰，輸入API key的數值，以及選擇要讓網站的訪客使用哪一種社交軟體登入，看不懂沒關係，後面的教學步驟都會持續提到這些名詞的!
第四步:在setting這個頁面是各項基本顯示以及功能的設置，包含用戶、評論、登錄這些頁面的個人化，比較主要的可以更改社交登入方框的的文字描述、顯示登入社交圖示的樣式及大小、選擇評論發表與否等等，如果對於特定功能有要求，可以詳細的去看，但如果不太瞭解意思，每個選擇方框裡的其中一個選項後面也有(Default)的標註，使用外掛預設的功能即可。
第一步:進入到 setup 頁面，點擊 click here to setup your free account 這一段文字的欄位，會進到登入oneall 的頁面，可以用其他社群帳號登入，也可以申請帳戶，接著就是設定的步驟。
第二步 :在安裝頁面的下方有兩個欄位，第一個是* Where would you like to use OneAll?，這個欄位有 website 及 application 兩個選項，我們是為了讓使用者可以在網站上使用社交帳號登入，所以要選擇 website。第二個 * Please tell us the URL of your website 就是輸入想要使用 Social Login 的網站的網址。
小提醒:在這裡是利用本機架設 wordpress 網站來做教學，因此網址只有 http://localhost/wordpress/ 這麼簡短，當然同學們如果有購買主機且網站已上線，網址就是當初購買設定的，詳細教學可以參考 wordpress-基本介紹八（設定）。
第三步:在這一頁分別有三個欄位，分別介紹如下:
1.* Site Name ，這一個欄位輸入網站名稱即可，在wordpress內設定好的網站名稱會自動套用;
2.* Desired OneAll Customer Subdomain 這個欄位是定義在OneAll這個網站內使用者的API憑證網址，有預設的名稱，如果覺得不好記，可以自行更改成想要的名稱
3.* Where will you use our services?這個欄位要輸入建站主機伺服器的名稱，同樣的也會根據wordpress預設填入。
第四步:在這一個頁面只有一個欄位要選擇，也就是 * How are you integrating our services?，在這裡選擇 I’m using or looking for a turnkey plugin.這個選項。在下方有三個欄位的字串， Subdomain 就是在第二步驟的第二點，可以使用預設或自定義的名稱; 另外兩點 Public Key 以及 Private Key 是在建立 OneAll 這個網站 API 憑證網址後，回到自己的站點做帳戶驗證使用的，可以將欄位內英數混合的字串複製下來貼在文字文件中，或者之後到 OneAll 主頁面內左方導覽列的 ACCOUNT 裡面也可以再次查詢，如下圖所示。
小提醒:在選擇 I’m using or looking for a turnkey plugin.這一段的意思，是使用或尋找 API 密鑰的外掛，我們要使用 Social Login這個外掛的功能，必須要與社交應用程式的網站做連結，在這樣的使用過程中必須要申請憑證，也就是API密鑰來讓社交網站可以對我們的站點有所信任，並保護帳號安全。
第五步:接下來進入設置社交網路，可以在這個頁面看到有很多知名的社交軟體圖示可以選擇，在這裡用 Google 來示範如何設定社交網路。
第六步:點擊Google的圖示，進入頁面後再次點擊綠色的按鈕( setup localhost fot google )，接下來跳轉的頁面就是如何設定如何讓網站可以使用 Google 帳號登入的流程。
第七步:根據頁面上的指示，如果沒有Google帳號必須新建立一個，已經有帳號的話就可以進入到 https://console.developers.google.com/ 這個網址內。
第八步:進入頁面後點擊上方的建立專案，名稱的部分一樣輸入第四步設定的 Subdomain 的名稱即可。
第九步:回到專案的頁面，點擊左上方的 Google 三條橫線樣式的小選單，從API和服務中選取資料庫，在這個頁面尋找社交的類別，點選 Google+ 的圖示，進入Google+介紹頁面後，點選上方的啟用按鍵，之後跳轉的畫面會顯示要有憑證才能啟用功能。
第十步:同樣點擊左上方的Google小選單，進入憑證畫面，點選中央方框的下拉選單，選擇OAuth用戶端ID，進入頁面後，畫面上會顯示”您必須先在同意畫面中設定產品名稱，才能建立 OAuth 用戶端 ID”，點選這個欄位最右方的設定同意畫面。
第十二步:OAuth同意畫面設定完成後，會跳轉到建立用戶端 ID的頁面，在應用程式類型中選擇第一項網路應用程式，下方有三個欄位分別是名稱、已授權的 JavaScript 來源、已授權的重新導向 URI，這三欄位可以在第六步所顯示的 Google 設定流程頁面的第九點內找到，同樣複製貼上，按下建立憑證。
第十三步:最後會跳出一個OAuth用戶端的小視窗，分別顯示OAuth用戶端ID以及用戶端密鑰，在欄位最右方都有複製的按鈕，將其複製的電腦桌面新增文字文件，到Google設定流程頁面第10項，將剛剛複製的用戶端ID及用戶端密鑰貼上，按下儲存，畫面最上方就會顯示綠色底的成功訊息。
第十四步:回到wordpress後台，點選Social Login選擇setup，找到API Settings這個表格，有三個欄位分別是API Subdomain、API Public Key、API Private Key，還記得第二步第二點設定的 Subdomain名稱以及第四步設定所顯示的API Public Key、API Private Key的數值嗎?找出剛剛複製下來的文字文件檔案，將數值貼上欄位，並記得在滾動畫面向下到社交圖示選擇表格的 Google 標示打勾，點擊左下方的 verify API setting，就設定完成了。
第十五步:直接登出wordpress，在登入畫面的左下角就會顯示可以用社交應用程式的帳號登入的圖示了!
第十六步:也可以使用外觀/小工具的功能，請參閱 wordpress-基本介紹五（外觀），會有一格顯示為 Social Login的小方格，將其拉到頁尾的地方，就可以在首頁的頁尾顯示社交應用程式的登入圖示了。
Social Login社交登入 這個外掛在教學文中示範的是 Google+ 的設定方法，而其實還有很多各種的社交應用程式可以在網站上提供使用者做登入，在這裡要提醒的是，在OneAll 這個網站所建立API憑證網址的並不是一個網誌建立一個社交應用程式登入，而是必須使用這個API憑證網址，繼續與其他的社交應用程式建立API密鑰的連結。各位同學也不用擔心其它的社交應用程式會很難建立，不管是建立哪一個社交軟體，都會有會像我示範的Google一樣會顯示詳細的連結流程，唯一的難點就只是OneAll這個網站是全英文介面，需要一些輔助才有辦法看懂意思的。
這一篇教學很長很長，鵠學苑是非常用心的想教導各位同學，看在辛苦講解的份上，可不可以持續的追蹤關注 鵠學苑 呢??這就是給我最大的鼓勵跟動力了喔!教學到此告一段落拉~下一篇教學各位同學記得要回來上課喔!
部落格架站該如何選擇？Medium跟WordPress的優勢比較！
重複內容 會影響SEO？如何正確把內容分享到社群平台！
購物網站架設 – 電子商務網站建置的細節與項目