ลองสิ VueJs 2.2.1 + Firebase Authentication with Facebook login

ดีทุกคนวันนี้อยากลองทำ Vuejs บวกกับ firebase Auth นะครับ

มาเริ่มกันเลยดีกว่า จะลองเล่นเป็นครั้งเเรกนะครับ

firebase + VueJs + Facebook login

ผมก็เข้าไปสร้าง database ของ firebase กันก่อนนะ

ตั้งค่าเว็บทำให้เราได้ code นี้ครับ

ทดไว้ก่อนเดี๋ยวได้ใช้งาน

<script src="https://www.gstatic.com/firebasejs/3.7.0/firebase.js"></script>
<script>
  // Initialize Firebase
  var config = {
    apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    authDomain: "fir-auth-12e52.firebaseapp.com",
    databaseURL: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    storageBucket: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    messagingSenderId: "xxxxxxxxxxxxxxxxxxxx"
  };
  firebase.initializeApp(config);
</script>

จากนั้นให้เราเข้าไปที่การทำ Authentication

จากนั้นให้เข้าไปที่ วิธีการลงชื่อเข้าใช้งาน (มันเปลี่ยนเป็นภาษาอังกฤษยังไงว่ะ)

หน้านี่เองนะครับ

จากนั้นก็เลือก facebook ครับผม

ซึ่งมันบอกต้องการเลข app id เเละก็ secert id เราก็พักไว้ก่อนนะครับ

ผมสร้างไอดีเลยนะครับ

ผมเราสร้างเสร็จเราก็ไปต่อกันที่นี้เลยนะครับ ไปที่ setting / basic

ไปเอา app id กับ app secret id ไปใส่ไว้ใน firebase ครับ

จากนั้นให้สังเกตุตรงนี้นิ

ให้ copyมาเลยนะครับ เเต่ละคนจะไม่เหมือนกันนะ

จานั้นกลับไปที่ facebook เเล้วไปที่ add product ไปที่ facebook login นะครับ

valid Oauth นี้เเหละเราเอาโค้ดมาว่างเลย

จากนั้นก็ถือว่าเสร็จเเล้วครับ ต่อไปเราจะนำไปต่อกับ Vuejs กันนะครับ

อย่าลืมลงอันนี้ด้วยนะครับ

yarn add firebase --save

จากนั้นก็สร้างหน้าไว้สำหรับกรอกได้เเล้ว ง่ายยยยยยยสัสๆๆๆๆ

ผมทำตามนี้เลยนะครับ

Authenticate Using Facebook Login with JavaScript | Firebase

ถ้าใคร login เเล้วก็สามารถที่จะเห็น database ใน firebase ได้เลยนะครับ ฮ่าๆๆ

live demo::: https://fir-auth-12e52.firebaseapp.com/#/

ลองไปเล่นดูนะครับ วันนี้ บายจ้า