Log masuk sosial untuk spa anda: Sahkan pengguna anda melalui Google dan Facebook

Bilangan aplikasi web dengan senibina aplikasi halaman tunggal semakin meningkat. Aplikasi ini sering memerlukan beberapa tahap interaksi yang terhad pengguna, seperti menyimpan butiran profil pengguna. Melaksanakan fungsi ini dalam aplikasi berasaskan HTML tradisional agak mudah, tetapi ia lebih rumit dalam aplikasi satu halaman yang memerlukan pengesahan untuk setiap permintaan API.

Artikel ini akan menunjukkan teknik yang menggunakan Perpustakaan Pasport.js untuk melaksanakan log masuk sosial untuk pelbagai penyedia dan dengan itu melaksanakan pengesahan berasaskan token panggilan API berikutnya.

Semua kod sumber untuk artikel ini boleh dimuat turun dari repositori GitHub kami.

mata utama

Gunakan perpustakaan pasport.js untuk melaksanakan log masuk sosial untuk Google dan Facebook, dan meningkatkan pengesahan pengguna untuk aplikasi satu halaman.

• Pilih JSON Web Tokens (JWT) untuk pengesahan API berasaskan token yang selamat, mengelakkan sekatan sesi dan kuki.
• Gunakan Ciri Masuk Sosial: UI yang dipermudahkan, tidak perlu menyimpan kelayakan pengguna, dan menetapkan semula kata laluan lintas tapak.
• Konfigurasi pasport dengan modul tertentu seperti pasport-google-oAuth, pasport-facebook, dan pasport-jwt untuk menguruskan pengesahan dan penjanaan token.
• Gunakan modul Pasport-JWT untuk melaksanakan pengesahan berasaskan token, melindungi titik akhir API dengan mengesahkan JWT dalam tajuk kebenaran.
• Memudahkan pengalaman pengguna dengan mod redirect dan skrip klien.

Mengapa menggunakan log masuk sosial di spa anda?

Banyak isu perlu dipertimbangkan semasa melaksanakan mekanisme log masuk dalam aplikasi web anda.

Bagaimana Pengesahan UI anda sendiri?

• Bagaimana anda perlu menyimpan maklumat pengguna?
• Bagaimana anda harus melindungi kelayakan pengguna?
Ini dan lebih banyak soalan perlu dipertimbangkan sebelum mula menulis portal log masuk. Tetapi, ada cara yang lebih baik.

Banyak laman web, terutamanya rangkaian sosial, membolehkan anda menggunakan platform mereka untuk mengesahkan aplikasi anda sendiri. Ini dilaksanakan melalui pelbagai API - OAuth 1.0, OAuth 2.0, OpenID, OpenID Connect, dll.

Terdapat banyak kelebihan untuk melaksanakan proses log masuk anda menggunakan teknologi log masuk sosial ini.

• Anda tidak lagi bertanggungjawab untuk menyampaikan UI yang digunakan pengguna untuk mengesahkan.
• Anda tidak lagi bertanggungjawab untuk menyimpan dan melindungi butiran pengguna yang sensitif.
• Pengguna dapat mengakses beberapa laman web menggunakan log masuk tunggal.
• Jika pengguna merasakan kata laluan mereka telah dibocorkan, mereka boleh menetapkan semula kata laluan mereka sekali dan mendapat manfaat dari banyak laman web.
• Biasanya, perkhidmatan yang menyediakan keupayaan pengesahan akan memberikan butiran tambahan. Sebagai contoh, ini boleh digunakan untuk mendaftarkan pengguna secara automatik yang tidak pernah menggunakan laman web anda, atau untuk membolehkan anda menghantar kemas kini ke profil mereka bagi pihak mereka.

Mengapa menggunakan pengesahan berasaskan token untuk API anda?

Setiap kali pelanggan perlu mengakses API anda, anda memerlukan beberapa cara untuk menentukan siapa mereka dan sama ada atau tidak untuk membenarkan akses. Terdapat banyak cara untuk mencapai matlamat ini, tetapi pilihan utama ialah:

• Pengesahan berasaskan Sesi
• Pengesahan berasaskan cookie
• Pengesahan berasaskan token

Pengesahan berasaskan sesi memerlukan perkhidmatan API anda untuk mengaitkan sesi dengan pelanggan. Ini biasanya sangat mudah untuk ditubuhkan, tetapi jika anda menggunakan API anda pada pelbagai pelayan, anda mungkin menghadapi masalah. Anda juga dibatasi oleh mekanisme yang digunakan oleh pelayan untuk pengurusan sesi dan tamat tempoh, yang mungkin tidak berada di bawah kawalan anda.

Pendekatan berasaskan kuki ialah anda hanya menyimpan beberapa pengenal dalam kuki, yang akan digunakan untuk mengenal pasti permintaan API secara automatik. Ini bermakna anda memerlukan beberapa jenis mekanisme untuk menetapkan kuki terlebih dahulu, dan anda boleh membocorkannya dalam permintaan berikutnya, kerana kuki secara automatik dimasukkan ke dalam semua (sesuai) permintaan ke hos yang sama.

Pendekatan berasaskan token adalah varian pengesahan berasaskan cookie, tetapi ia memberi anda lebih banyak kawalan. Pada asasnya, anda menjana token dengan cara yang sama seperti sistem pengesahan berasaskan cookie, tetapi anda memasukkan diri anda dalam permintaan - biasanya dalam tajuk "kebenaran" atau secara langsung di URL. Ini bermakna anda mempunyai kawalan penuh ke atas token penyimpanan, yang permintaan akan memasukkannya, dan banyak lagi.

Nota: Walaupun header HTTP dipanggil "kebenaran", kami sebenarnya menggunakannya untuk pengesahan. Ini kerana kami menggunakannya untuk menentukan siapa pelanggan, bukan apa yang dibenarkan oleh pelanggan.

Strategi yang digunakan untuk menjana token juga penting. Tanda -tanda ini boleh menjadi token rujukan, bermakna mereka tidak lebih daripada pengenal yang digunakan oleh pelayan untuk mencari butiran sebenar. Atau token lengkap, yang bermaksud bahawa token sudah mengandungi semua maklumat yang diperlukan.

Merujuk token mempunyai kelebihan keselamatan yang signifikan kerana kelayakan pengguna tidak pernah bocor kepada pelanggan. Walau bagaimanapun, kerana anda perlu menghuraikan token ke dalam kelayakan sebenar dalam setiap permintaan yang dibuat, terdapat penalti prestasi.

Token lengkap adalah sebaliknya. Mereka mendedahkan kelayakan pengguna kepada sesiapa yang memahami token, tetapi sejak token selesai, tidak ada kehilangan prestasi ketika mencarinya.

Biasanya, token penuh akan dilaksanakan menggunakan standard token web JSON, kerana standard ini membolehkan keselamatan token yang lebih baik. Khususnya, JWT membenarkan token penyulitan, yang bermaksud anda dapat menjamin bahawa token itu belum diganggu. Ia juga ditetapkan bahawa mereka boleh disulitkan, yang bermaksud bahawa token itu tidak dapat dikodkan tanpa kunci penyulitan.

Jika anda ingin menyemak menggunakan JWT dalam nod, lihat tutorial kami: Menggunakan token web JSON dengan node.js.

Satu lagi kelemahan menggunakan token penuh adalah saiz. Sebagai contoh, token rujukan boleh dilaksanakan menggunakan UUID, iaitu 36 aksara panjang. Sebaliknya, JWT boleh dengan mudah selama beratus -ratus aksara.

Dalam artikel ini, kami akan menggunakan token JWT untuk menunjukkan bagaimana mereka bekerja. Walau bagaimanapun, apabila anda melaksanakan fungsi ini sendiri, anda perlu memutuskan sama ada anda ingin menggunakan token rujukan atau token penuh dan mekanisme apa yang akan digunakan untuk ini.

Apakah pasport?

Pasport adalah satu set modul dalam node.js untuk pengesahan dalam aplikasi web anda. Ia boleh memasangkan pelayan web berasaskan nod dengan mudah dan menggunakan struktur modular untuk melaksanakan mekanisme log masuk yang anda perlukan tanpa kembung yang berlebihan.

Pasport adalah suite modul yang kuat yang meliputi sejumlah besar keperluan pengesahan. Menggunakan modul ini, kita boleh membuat persediaan pluggable yang membolehkan keperluan pengesahan yang berbeza untuk titik akhir yang berbeza. Sistem pengesahan yang digunakan boleh semudah menyemak nilai-nilai khas dalam URL, atau sebagai kompleks seperti bergantung kepada penyedia pihak ketiga untuk melakukan semua kerja.

Dalam artikel ini, kami akan menggunakan modul pasport-oauth-oauth, pasport-facebook, dan pasport-jwt untuk membolehkan log masuk sosial dan pengesahan berasaskan token JWT untuk titik akhir API.

Modul Pasport-JWT akan digunakan untuk menghendaki beberapa titik akhir-titik akhir API yang sebenarnya kita perlukan pengesahan untuk mengakses-JWT yang sah mesti wujud dalam permintaan. Modul pasport-google-oAuth dan pasport-facebook akan digunakan untuk memberikan titik akhir yang mengesahkan kepada Google dan Facebook masing-masing, dan kemudian menghasilkan JWT yang boleh digunakan untuk mengakses titik akhir lain dalam aplikasi.

Dayakan log masuk sosial untuk aplikasi halaman tunggal anda

dari sini kita akan berjalan melalui cara mendapatkan aplikasi halaman tunggal yang mudah dan melaksanakan log masuk sosial untuknya. Permohonan ini ditulis secara ekspres, API mudah menyediakan titik akhir yang selamat dan titik akhir yang tidak selamat. Jika anda ingin meneruskan, anda boleh menyemak kod sumber aplikasi ini dari https://github.com/sitePoint-editors/social-logins-spa. Aplikasi ini boleh dibina dengan melaksanakan pemasangan NPM dalam kod sumber yang dimuat turun - memuat turun semua kebergantungan - dan kemudian berjalan dengan melaksanakan nod SRC/index.js.

Untuk berjaya menggunakan aplikasinya, anda perlu mendaftarkan kelayakan log masuk sosial dengan Google dan Facebook dan memberikan kelayakan kepada aplikasinya. Arahan lengkap boleh didapati dalam fail ReadMe aplikasi demo. Kelayakan ini diakses sebagai pembolehubah persekitaran. Oleh itu, aplikasi boleh dijalankan seperti berikut:

<code class="language-bash"># Linux / OS X
$ export GOOGLE_CLIENTID=myGoogleClientId
$ export GOOGLE_CLIENTSECRET=myGoogleClientSecret
$ export FACEBOOK_CLIENTID=myFacebookClientId
$ export FACEBOOK_CLIENTSECRET=myFacebookClientSecret
$ node src/index.js</code>

<code class="language-bash"># Windows
> set GOOGLE_CLIENTID=myGoogleClientId
> set GOOGLE_CLIENTSECRET=myGoogleClientSecret
> set FACEBOOK_CLIENTID=myFacebookClientId
> set FACEBOOK_CLIENTSECRET=myFacebookClientSecret
> node src/index.js</code>

Hasil akhir dari proses ini adalah untuk menambah sokongan pengesahan token (menggunakan token Web JSON) ke titik akhir selamat kami dan kemudian menambah sokongan log masuk sosial (menggunakan Google dan Facebook) untuk mendapatkan selebihnya penggunaan peruntukan token. Ini bermakna anda perlu mengesahkan sekali menggunakan pembekal sosial dan kemudian menggunakan JWT yang dihasilkan untuk membuat semua panggilan API masa depan dalam aplikasinya.

JWT adalah pilihan yang sangat baik untuk senario kami kerana mereka benar-benar mandiri semasa masih selamat. JWT terdiri daripada muatan JSON dan tandatangan yang disulitkan. Muatan mengandungi butiran pengguna yang disahkan, sistem pengesahan dan tempoh kesahihan token. Tanda tangan kemudian memastikan bahawa pihak ketiga yang berniat jahat tidak dapat menjalinnya -hanya orang yang mempunyai kunci tandatangan dapat menghasilkan token.

Apabila membaca artikel ini, anda akan sering melihat rujukan kepada modul Config.js yang terkandung sebagai sebahagian daripada permohonan anda. Modul ini digunakan untuk mengkonfigurasi aplikasi dan dikonfigurasi secara luaran menggunakan modul nod-convict. Konfigurasi yang digunakan dalam artikel ini adalah seperti berikut:

• http.port - port di mana aplikasi berjalan. Lalai adalah 3000 dan ditindih dengan pembolehubah persekitaran "port".
• pengesahan.google.clientid - ID klien Google untuk Pengesahan Google. Ini diberikan kepada aplikasi melalui pembolehubah persekitaran "Google_Clientid".
• Authentication.google.ClientSecret - Google Client Key untuk Pengesahan Google. Ini diberikan kepada aplikasi melalui pembolehubah persekitaran "Google_ClientSecret".
• Authentication.facebook.ClientID - ID Pelanggan Facebook untuk Pengesahan Facebook. Ini diberikan kepada aplikasi melalui pembolehubah persekitaran "facebook_clientid".
• pengesahan.facebook.clientsecret - Kunci klien Facebook untuk pengesahan Facebook. Ini diberikan kepada aplikasi melalui pembolehubah persekitaran "Facebook_ClientSecret".
• pengesahan.token.secret - Kunci kepada JWT yang menandatangani token pengesahan kami. Lalai adalah "Mysupersecretkey".
• pengesahan.token.issuer - penerbit yang disimpan dalam JWT. Ini menunjukkan perkhidmatan mana yang mengeluarkan token, dalam kes di mana satu perkhidmatan pengesahan berfungsi banyak aplikasi.
• Authentication.Token.Audience - Penonton yang disimpan di JWT. Ini mewakili perkhidmatan sasaran token, dalam kes di mana satu perkhidmatan pengesahan berfungsi banyak aplikasi.

Pasport bersepadu

Sebilangan kecil tetapan diperlukan sebelum menggunakan pasport dalam aplikasi anda. Ini tidak lebih daripada memastikan modul dipasang dan memulakan middleware dalam aplikasi Express anda.

Modul yang diperlukan pada tahap ini adalah modul pasport, dan kemudian untuk menubuhkan middleware, kami hanya perlu menambahkannya ke aplikasi Express kami.

<code class="language-javascript">// src/index.js
const passport = require('passport');
.....
app.use(passport.initialize());</code>

Jika anda mengikuti arahan di laman web pasport, anda akan dibenarkan untuk menyediakan sokongan sesi - dengan menghubungi menggunakan pasport.sies (). Kami tidak menggunakan sebarang sokongan sesi dalam aplikasi kami, jadi ini tidak perlu. Ini kerana kami sedang melaksanakan API tanpa statistik, jadi kami akan memberikan pengesahan untuk setiap permintaan dan bukannya berterusan ke dalam sesi.

Melaksanakan pengesahan token JWT untuk titik akhir selamat

Menyediakan pengesahan token JWT dengan pasport agak mudah. Kami akan menggunakan modul Pasport-JWT, yang akan melakukan semua mengangkat berat untuk kami. Modul ini mencari tajuk "Kebenaran" dengan nilai yang bermula dengan "JWT" ​​dan merawat seluruh tajuk sebagai token JWT untuk pengesahan. Ia kemudian menguraikan JWT dan memberikan nilai -nilai yang disimpan di sana untuk kod anda sendiri untuk operasi -contohnya, melakukan carian pengguna. Sekiranya JWT tidak sah, seperti tandatangan tidak sah, token telah tamat tempoh ... permintaan itu tidak akan disahkan tanpa penglibatan tambahan kod anda sendiri.

Kemudian, kaedah untuk mengkonfigurasi pengesahan token JWT adalah seperti berikut:

<code class="language-bash"># Linux / OS X
$ export GOOGLE_CLIENTID=myGoogleClientId
$ export GOOGLE_CLIENTSECRET=myGoogleClientSecret
$ export FACEBOOK_CLIENTID=myFacebookClientId
$ export FACEBOOK_CLIENTSECRET=myFacebookClientSecret
$ node src/index.js</code>

di atas, kami menggunakan beberapa modul dalaman:

• config.js - mengandungi sifat konfigurasi untuk keseluruhan aplikasi kami. Ia boleh diandaikan bahawa sifat -sifat ini telah dikonfigurasikan dan nilai -nilai itu boleh digunakan pada bila -bila masa.
• users.js - Ini adalah penyimpanan pengguna aplikasi. Ini membolehkan pengguna dimuatkan dan dicipta - di sini kami hanya memuatkan pengguna dengan ID dalaman mereka.

di sini, kami mengkonfigurasi Decoder JWT dengan kunci, penerbit, dan penonton yang diketahui, dan kami memaklumkan dasar bahawa ia harus mendapatkan JWT dari pengepala kebenaran. Jika salah satu penerbit atau penonton tidak sepadan dengan apa yang disimpan dalam JWT, pengesahan akan gagal. Ini memberi kita satu lagi lapisan perlindungan anti-pemalsuan, walaupun ia adalah perlindungan yang sangat mudah.

Decoding token sepenuhnya diproses oleh modul pasport-JWT. Kerana JWT adalah standard, mana -mana modul yang mengikuti standard ini berfungsi dengan sempurna.

Selepas berjaya menyahkod token, ia akan diserahkan kepada panggilan balik kami sebagai muatan. Di sini kita hanya cuba mencari pengguna yang dikenal pasti oleh "topik" dalam token. Malah, anda boleh melakukan cek tambahan, seperti memastikan token tidak dibatalkan.

Jika pengguna dijumpai, kami memberikannya kepada pasport, dan pasport kemudian memberikannya kepada pemprosesan permintaan sebagai req.user. Sekiranya pengguna tidak dijumpai, kami tidak memberikan pengguna kepada pasport dan pasport akan mempertimbangkan pengesahan gagal.

ini sekarang boleh menyambung ke pengendali permintaan supaya permintaan memerlukan pengesahan untuk berjaya:

<code class="language-bash"># Windows
> set GOOGLE_CLIENTID=myGoogleClientId
> set GOOGLE_CLIENTSECRET=myGoogleClientSecret
> set FACEBOOK_CLIENTID=myFacebookClientId
> set FACEBOOK_CLIENTSECRET=myFacebookClientSecret
> node src/index.js</code>

Baris di atas 3 adalah sihir untuk membuat pasport mengendalikan permintaan. Ini menyebabkan pasport menjalankan dasar "JWT" ​​yang hanya dikonfigurasikan atas permintaan yang kami luangkan dan membenarkannya meneruskan atau gagal dengan segera.

kita dapat melihat bagaimana ia berfungsi dengan menjalankan aplikasi - dengan melaksanakan nod src/index.js - dan cuba mengakses sumber ini:

<code class="language-javascript">// src/index.js
const passport = require('passport');
.....
app.use(passport.initialize());</code>

Kami tidak memberikan sebarang tajuk kebenaran, ia tidak membenarkan kami meneruskan. Walau bagaimanapun, jika anda memberikan tajuk kebenaran yang sah, anda akan mendapat sambutan yang berjaya:

<code class="language-javascript">// src/authentication/jwt.js
const passport = require('passport');
const passportJwt = require('passport-jwt');
const config = require('../config');
const users = require('../users');

const jwtOptions = {
  // 从 "Authorization" 标头获取 JWT。
  // 默认情况下，这会查找 "JWT " 前缀
  jwtFromRequest: passportJwt.ExtractJwt.fromAuthHeader(),
  // 用于签署 JWT 的密钥
  secretOrKey: config.get('authentication.token.secret'),
  // JWT 中存储的发行者
  issuer: config.get('authentication.token.issuer'),
  // JWT 中存储的受众
  audience: config.get('authentication.token.audience')
};

passport.use(new passportJwt.Strategy(jwtOptions, (payload, done) => {
  const user = users.getUserById(parseInt(payload.sub));
  if (user) {
      return done(null, user, payload);
  }
  return done();
}));</code>

Untuk melakukan ujian ini, saya secara manual menjana JWT dengan melawat https://www.jsonwebtoken.io dan mengisi borang di sana. "Payload" adalah apa yang saya gunakan:

<code class="language-javascript">// src/index.js
app.get('/api/secure',
  // 此请求必须使用 JWT 进行身份验证，否则我们将失败
  passport.authenticate(['jwt'], { session: false }),
  (req, res) => {
    res.send('Secure response from ' + JSON.stringify(req.user));
  }
);</code>

"Kunci Tandatangan" adalah "Mysupersecretkey", diambil dari konfigurasi.

Generasi Token Sokongan

Sekarang kita boleh mengakses sumber hanya dengan token yang sah, kita memerlukan cara untuk benar -benar menjana token. Ini dilakukan menggunakan modul JsonWebtoken, yang membina JWT dengan butiran yang betul dan ditandatangani dengan kunci yang sama seperti di atas.

<code class="language-bash"># Linux / OS X
$ export GOOGLE_CLIENTID=myGoogleClientId
$ export GOOGLE_CLIENTSECRET=myGoogleClientSecret
$ export FACEBOOK_CLIENTID=myFacebookClientId
$ export FACEBOOK_CLIENTSECRET=myFacebookClientSecret
$ node src/index.js</code>

Perhatikan bahawa kami menggunakan penonton yang sama, penerbit, dan tetapan konfigurasi utama apabila menghasilkan JWTS. Kami juga menyatakan bahawa tempoh kesahihan JWT adalah satu jam. Ini boleh menjadi tempoh masa yang anda fikir adalah munasabah untuk aplikasi anda, dan bahkan boleh diekstrak dari konfigurasi supaya ia dapat diubah dengan mudah.

Dalam kes ini, tiada ID JWT ditentukan, tetapi ini boleh digunakan untuk menghasilkan ID yang unik untuk token - contohnya menggunakan UUID. Ini kemudian memberi anda cara untuk membatalkan token dan menyimpan koleksi ID yang dibatalkan di datastore dan periksa sama ada ID JWT tidak dalam senarai apabila memproses JWT dalam dasar pasport.

Penyedia log masuk sosial

Sekarang kita mempunyai keupayaan untuk menjana token, kita memerlukan cara untuk mendapatkan pengguna untuk benar -benar log masuk. Di sinilah penyedia log masuk sosial dimainkan. Kami akan menambah ciri yang membolehkan pengguna mengalihkan ke penyedia log masuk sosial dan menghasilkan token JWT apabila berjaya dan memberikannya kepada enjin JavaScript pelayar untuk permintaan masa depan. Kami sudah mempunyai hampir semua komponen ini, kami hanya perlu menyatukannya.

Penyedia log masuk sosial dalam pasport dibahagikan kepada dua bahagian. Pertama, anda perlu mengkonfigurasi pasport untuk penyedia log masuk sosial anda menggunakan plugin yang sesuai. Kedua, laluan ekspres yang diarahkan oleh pengguna diperlukan untuk memulakan pengesahan, dan laluan yang pengguna diarahkan semula selepas pengesahan berjaya.

Kami akan membuka URL ini dalam tetingkap subbrowser baru, yang boleh kami tutup apabila kami selesai dan dapat memanggil kaedah JavaScript di dalam tetingkap di mana ia dibuka. Ini bermakna proses itu agak telus kepada pengguna - pada kebanyakannya mereka akan melihat tetingkap baru terbuka, meminta mereka untuk memberikan kelayakan, tetapi yang terbaik mereka tidak dapat melihat apa -apa tetapi hakikat bahawa mereka kini log masuk.

Aspek penyemak imbas ini perlu terdiri daripada dua bahagian. Lihat tetingkap pop-up dan JavaScript yang mengendalikan pandangan ini di tetingkap utama. Ini boleh diintegrasikan dengan mudah dengan mana -mana rangka kerja, tetapi dalam contoh ini kita akan menggunakan vanila JavaScript untuk kesederhanaan.

halaman utama JavaScript hanya memerlukan sesuatu seperti ini:

<code class="language-bash"># Windows
> set GOOGLE_CLIENTID=myGoogleClientId
> set GOOGLE_CLIENTSECRET=myGoogleClientSecret
> set FACEBOOK_CLIENTID=myFacebookClientId
> set FACEBOOK_CLIENTSECRET=myFacebookClientSecret
> node src/index.js</code>

ini mendaftarkan objek fungsi global (dinamakan Authenticatecallback) pada tetingkap, yang akan menyimpan token akses, dan kemudian membuka laluan kami untuk memulakan pengesahan, kami mengakses/API/Authentication/{Provider}/Start.

Fungsi ini kemudiannya boleh dicetuskan dengan cara yang anda ingin memulakan pengesahan. Ini biasanya merupakan pautan log masuk di kawasan tajuk, tetapi butirannya bergantung sepenuhnya pada aplikasi anda.

Bahagian kedua adalah pandangan untuk dibentangkan selepas pengesahan yang berjaya. Dalam kes ini, kami menggunakan misai untuk kesederhanaan, tetapi ini akan menggunakan teknik tontonan yang paling sesuai untuk anda.

<code class="language-bash"># Linux / OS X
$ export GOOGLE_CLIENTID=myGoogleClientId
$ export GOOGLE_CLIENTSECRET=myGoogleClientSecret
$ export FACEBOOK_CLIENTID=myFacebookClientId
$ export FACEBOOK_CLIENTSECRET=myFacebookClientSecret
$ node src/index.js</code>

di sini kita hanya mempunyai kod JavaScript yang mudah yang memanggil kaedah AuthenticateCallback di atas pada program terbuka (iaitu, tetingkap aplikasi utama), dan kemudian kita menutup diri.

Pada ketika ini, token JWT akan tersedia dalam tetingkap aplikasi utama untuk sebarang tujuan yang anda mahukan.

Melaksanakan Google Authentication

menggunakan modul pasport-google-oAuth akan mengesahkan terhadap Google. Ini memerlukan tiga keping maklumat:

• id klien
• kekunci klien
• Redirect URL

ID dan kunci klien diperolehi dengan mendaftarkan aplikasi anda dalam konsol pemaju Google. URL Redirect adalah URL yang pengguna akan dihantar kembali ke aplikasi anda selepas log masuk dengan kelayakan Google mereka. Ini bergantung kepada bagaimana dan di mana aplikasi digunakan, tetapi sekarang kami akan mengikatnya.

Konfigurasi Pasport Pengesahan Google kami akan kelihatan seperti ini:

<code class="language-bash"># Windows
> set GOOGLE_CLIENTID=myGoogleClientId
> set GOOGLE_CLIENTSECRET=myGoogleClientSecret
> set FACEBOOK_CLIENTID=myFacebookClientId
> set FACEBOOK_CLIENTSECRET=myFacebookClientSecret
> node src/index.js</code>

Apabila pengguna mengalihkan kembali kepada kami selepas pengesahan yang berjaya, kami akan mendapat ID dan beberapa maklumat profil dalam sistem Google. Kami mula -mula cuba melihat sama ada pengguna ini telah dilog masuk sebelum ini. Jika ya, maka kami mendapat rekod pengguna mereka dan kami sudah selesai. Jika tidak, kami akan mendaftarkan akaun baru untuk mereka dan kami akan menggunakan akaun baru ini. Ini memberikan kami mekanisme telus di mana pendaftaran pengguna dilakukan pada log masuk pertama. Kita boleh melakukan ini dengan cara yang berbeza jika kita perlu, tetapi tidak perlu sekarang.

yang seterusnya adalah untuk menubuhkan pengendali penghalaan untuk menguruskan log masuk ini. Ini akan kelihatan seperti ini:

<code class="language-javascript">// src/index.js
const passport = require('passport');
.....
app.use(passport.initialize());</code>

Sila ambil perhatian laluan/API/Pengesahan/Google/Start dan/API/Pengesahan/GOGLE/Redirect. Seperti yang disebutkan di atas, varian /permulaan adalah URL yang kita buka, dan varian /redirect adalah URL yang Google mengalihkan pengguna pada kejayaan. Ini kemudian akan menjadikan pandangan yang disahkan yang kami tunjukkan di atas, menyediakan JWT yang dihasilkan untuk kegunaannya.

Melaksanakan Pengesahan Facebook

Sekarang kita mempunyai penyedia log masuk sosial yang pertama, mari kita berkembang dan tambahkan yang kedua. Kali ini ia akan menjadi Facebook, menggunakan modul Pasport-Facebook.

Modul ini berfungsi hampir dengan cara yang sama seperti modul Google, yang memerlukan konfigurasi yang sama dan tetapan yang sama. Satu -satunya perbezaan yang nyata ialah ia adalah modul yang berbeza dan struktur URL yang mengaksesnya adalah berbeza.

3 ID Pelanggan dan Kunci Pelanggan (dipanggil ID App dan Kunci App di Facebook) boleh didapati dengan membuat aplikasi Facebook di konsol pemaju Facebook. Anda perlu memastikan produk log masuk Facebook ditambah ke aplikasi anda untuk mendapatkannya berfungsi.

Konfigurasi Pasport Pengesahan Facebook kami akan menjadi:

<code class="language-javascript">// src/authentication/jwt.js
const passport = require('passport');
const passportJwt = require('passport-jwt');
const config = require('../config');
const users = require('../users');

const jwtOptions = {
  // 从 "Authorization" 标头获取 JWT。
  // 默认情况下，这会查找 "JWT " 前缀
  jwtFromRequest: passportJwt.ExtractJwt.fromAuthHeader(),
  // 用于签署 JWT 的密钥
  secretOrKey: config.get('authentication.token.secret'),
  // JWT 中存储的发行者
  issuer: config.get('authentication.token.issuer'),
  // JWT 中存储的受众
  audience: config.get('authentication.token.audience')
};

passport.use(new passportJwt.Strategy(jwtOptions, (payload, done) => {
  const user = users.getUserById(parseInt(payload.sub));
  if (user) {
      return done(null, user, payload);
  }
  return done();
}));</code>

Ini hampir sama dengan konfigurasi Google, kecuali bahawa "Facebook" digunakan bukannya "Google". Routing URL juga serupa:

<code class="language-javascript">// src/index.js
app.get('/api/secure',
  // 此请求必须使用 JWT 进行身份验证，否则我们将失败
  passport.authenticate(['jwt'], { session: false }),
  (req, res) => {
    res.send('Secure response from ' + JSON.stringify(req.user));
  }
);</code>

di sini kita tidak perlu menentukan julat yang kita mahu gunakan, kerana set lalai cukup baik. Jika tidak, konfigurasi antara Google dan Facebook hampir sama.

Ringkasan

Gunakan penyedia log masuk sosial untuk menambah log masuk pengguna dan pendaftaran ke aplikasi anda dengan cepat dan mudah. Malah, ini menggunakan pengalihan penyemak imbas untuk menghantar pengguna ke penyedia log masuk sosial dan kemudian menghantarnya kembali ke aplikasi anda, yang memungkinkan untuk mengintegrasikannya ke dalam aplikasi halaman tunggal, walaupun ia diintegrasikan ke dalam aplikasi yang lebih tradisional agak mudah.

Artikel ini menunjukkan cara untuk mengintegrasikan penyedia log masuk sosial ini ke dalam satu aplikasi halaman tunggal yang menjanjikan kedua -duanya mudah digunakan dan mudah untuk skala kepada penyedia masa depan yang mungkin anda gunakan. Pasport mempunyai banyak modul yang boleh berfungsi dengan penyedia yang berbeza, dan ia hanya satu perkara untuk mencari modul yang betul dan mengkonfigurasi seperti yang kita lakukan di atas dengan Google dan Facebook.

Artikel ini telah dikaji semula oleh James Kolce. Terima kasih kepada semua pengulas rakan sebaya untuk mendapatkan kandungan sitePoint untuk yang terbaik

FAQs Mengenai Integrasi Login Sosial (Soalan Lazim)

Apakah faedah mengintegrasikan log masuk sosial ke dalam aplikasi web saya?

Mengintegrasikan log masuk sosial ke dalam aplikasi web anda boleh membawa beberapa faedah. Pertama, ia memudahkan proses pendaftaran untuk pengguna kerana mereka boleh mendaftar dengan akaun media sosial yang sedia ada tanpa mengingati nama pengguna dan kata laluan yang lain. Kedua, ia dapat meningkatkan kadar penukaran, sebagai proses pendaftaran yang mudah dapat menggalakkan lebih banyak pengguna mendaftar. Akhirnya, ia memberi anda akses kepada data pengguna dalam profil media sosial mereka yang boleh digunakan untuk memperibadikan pengalaman mereka di laman web anda.

Bagaimana untuk memastikan keselamatan data pengguna semasa menggunakan log masuk sosial?

Adalah penting untuk memastikan keselamatan data pengguna apabila mengintegrasikan log masuk sosial. Anda boleh melakukan ini dengan mengesahkan menggunakan protokol selamat seperti OAuth 2.0, yang memastikan kata laluan pengguna tidak dikongsi dengan aplikasi anda. Di samping itu, anda hanya perlu meminta jumlah minimum data pengguna yang diperlukan oleh aplikasi dan memastikan data ini disimpan dengan selamat.

Bolehkah saya mengintegrasikan pelbagai log masuk sosial dalam aplikasi web saya?

Ya, anda boleh mengintegrasikan pelbagai log masuk sosial dalam aplikasi web anda. Ini dapat memberi pengguna lebih banyak pilihan dan meningkatkan kemungkinan pendaftaran mereka. Walau bagaimanapun, adalah penting untuk memastikan bahawa pengalaman pengguna tetap lancar tanpa mengira mana log masuk sosial pengguna memilih untuk digunakan.

Bagaimana menangani pengguna dengan pelbagai akaun media sosial?

Pemprosesan pengguna dengan pelbagai akaun media sosial boleh mencabar. Satu penyelesaian adalah untuk membolehkan pengguna menghubungkan pelbagai akaun media sosial ke satu akaun pada aplikasi anda. Dengan cara ini, mereka mempunyai pilihan untuk log masuk dengan mana -mana akaun yang dipautkan.

Apa yang berlaku jika pengguna melumpuhkan akaun media sosial mereka?

Jika pengguna melumpuhkan akaun media sosial mereka, mereka tidak lagi dapat menggunakan akaun untuk log masuk ke aplikasi anda. Untuk mengendalikan ini, anda boleh memberi pengguna pilihan untuk menambah alamat e -mel atau nombor telefon ke akaun mereka, dan jika mereka menyahaktifkan akaun media sosial mereka, anda boleh log masuk dengan maklumat ini.

Bagaimana untuk menyesuaikan penampilan butang log masuk sosial?

CSS boleh digunakan untuk menyesuaikan penampilan butang log masuk sosial. Walau bagaimanapun, pastikan anda mengikuti garis panduan jenama yang disediakan oleh platform media sosial. Sebagai contoh, logo "F" Facebook harus sentiasa digunakan dalam bentuk asalnya dan tidak boleh diubah suai dengan apa -apa cara.

Bolehkah saya menggunakan log masuk sosial untuk aplikasi mudah alih?

Ya, log masuk sosial boleh digunakan untuk aplikasi web dan mudah alih. Proses mengintegrasikan log masuk sosial dalam aplikasi mudah alih adalah serupa dengan aplikasi web, tetapi anda mungkin perlu menggunakan SDK khusus yang disediakan oleh platform media sosial.

Bagaimana untuk menguji fungsi log masuk sosial?

Anda boleh menguji ciri log masuk sosial dengan membuat akaun ujian di platform media sosial dan menggunakan akaun ini untuk log masuk ke aplikasi anda. Ini dapat membantu anda mengenal pasti sebarang masalah atau kesilapan sebelum aplikasi bermula.

Apa yang harus saya lakukan jika pengguna lupa untuk mendaftar dengan akaun media sosial mana yang digunakan?

Jika pengguna melupakan akaun media sosial yang akan mendaftar, anda boleh memberikan pilihan pemulihan yang membolehkan mereka memasukkan alamat e -mel atau nombor telefon mereka untuk menerima senarai akaun media sosial yang dikaitkan dengan akaun mereka.

Bolehkah saya mengintegrasikan log masuk sosial tanpa pengekodan?

Walaupun beberapa alat dan plugin boleh digunakan untuk mengintegrasikan login sosial tanpa pengekodan, ia boleh memberi manfaat untuk mengetahui pengetahuan pengekodan. Ini dapat memberi anda lebih banyak fleksibiliti dan kawalan ke atas proses integrasi, dan juga dapat membantu anda menyelesaikan masalah yang mungkin timbul.

Atas ialah kandungan terperinci Log masuk sosial untuk spa anda: Sahkan pengguna anda melalui Google dan Facebook. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!