google-login-vue3
Version:
A lightweight and customizable Vue 3 component for Google OAuth 2.0 authentication, supporting both code-based and JWT-based authentication modes.
2 lines (1 loc) • 3.35 kB
JavaScript
(function(e,n){typeof exports=="object"&&typeof module<"u"?module.exports=n(require("vue")):typeof define=="function"&&define.amd?define(["vue"],n):(e=typeof globalThis<"u"?globalThis:e||self,e.GoogleLoginVue3=n(e.Vue))})(this,function(e){"use strict";const n={key:0,class:"g_id_signin"},d={__name:"GoogleLogin",props:{clientId:{type:String,required:!0},mode:{type:String,default:"JWT",validator:i=>["code","JWT"].includes(i)},oneTapLogin:{type:Boolean,default:!0}},emits:["success","error"],setup(i,{emit:r}){const c=e.defineAsyncComponent(()=>Promise.resolve().then(()=>f)),o=i,l=r,A=()=>{o.mode==="code"&&window.google.accounts.oauth2.initCodeClient({client_id:o.clientId,scope:"profile email",callback:t=>{t.error?l("error",t):l("success",t)}}).requestCode()};return e.onMounted(()=>{const t=document.createElement("script");t.src="https://accounts.google.com/gsi/client",t.async=!0,t.defer=!0,t.onload=()=>{o.mode==="JWT"&&(window.google.accounts.id.initialize({client_id:o.clientId,callback:s=>{s.credential?l("success",{credential:s.credential}):l("error",s)},auto_select:!1}),window.google.accounts.id.renderButton(document.querySelector(".g_id_signin"),{theme:"outline",size:"large"}),o.oneTapLogin&&window.google.accounts.id.prompt())},document.head.appendChild(t)}),(t,s)=>o.mode==="JWT"?(e.openBlock(),e.createElementBlock("div",n)):(e.openBlock(),e.createElementBlock("div",{key:1,onClick:A},[e.renderSlot(t.$slots,"default",{},()=>[e.createVNode(e.unref(c))])]))}},a="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAABHVBMVEVHcExChfRChfRChfbrQzU0qFPrQzU1qFLrQzWSq1RHqk00qFPrQzU0qFNChfRChfXsSzLrQzU0qFPrQzXrQzU0qFPrQzX8vAX7vAVChfT7vAUzqFOakD1ChfRChfT7vAXrQzU0qFNBqVLrQzXrQzXrQzXrQzXrQjXrQzU0qFM0qFNChfQ0qFPrQzXrQjUzqFP6qwxChfTrQzU8krg0qFPrQzVChfQ0p1hChfTsSDM0qFO1tSA0qFNChfRChfT4vAb7vQRChfT7vAX7vAX2lhQ0qFPrQzX7vAX7vAU0qFH3nRFChfRChfTrQzU0qFNChfT8vAQ5nIzwZifzgxw/jNY2o2rsSzJBiOb6twdTq0fYuROOsTDsuwttrj35rQubbm0NAAAATXRSTlMAGdsC9+oLsosFC/7t/KpwWDlZHPx1ruCykFE8AvA3o5h/ZRJCBWC14k3x4RDQScAM+tj2l3sRnle+5PrTnQsnIrj3hfsvbsLFNfiyzgKT5BUAAAGHSURBVDjLhZLndoJAEIVXAUGKCIoNe+zBkqixRk2vIKb393+MkKVIkZPv1569d2fuDABgEYsW23RcRhsTohICHmLDNiqb0PWoy1KttWUHaIKz63tFVHbTiNrKJ+QdEFXrvU1HUbMWYaXIEqZ6WKxVuM5lgpbl+FYHHdqIPowZibk6atN7E+N5xRa6Y5syc/sAQ3NgN+GC+qM50JqPDpZJVX17fKmH/AyZU1Xj3NrKUcDBApz96WpyZehIOuiABQVouOqZhsjawTFIQUMq7GO4+9+gt7j2axExQy49IQ+gIW2MOSu7x8zvQwMLVtqivj6VruTazxhWyOVBtqB+fCsKIzj1xQkscB/QVjl7VzSwpsPAmhEAIHEFMuWz2y/I5tZGBw0R0x2twYW+jfDNqG/sEYEXAqM7FAwX+CZfwrUXm1dND+b1guRAsaAYSj9snta5sdlSGlGKh+c+i1ihyFLLY8DKiG2qbLPLOGQGF12bk8rdltmIwnBe8v58pFjC5xg2neOCSFq3v3TAilJGu9ntAAAAAElFTkSuQmCC",u=["src"],f=Object.freeze(Object.defineProperty({__proto__:null,default:{__name:"CustomButton",props:{buttonStyles:{type:Object,default:()=>({cursor:"pointer",display:"inline-flex",alignItems:"center",padding:"10px 20px",borderRadius:"5px",boxShadow:"0 2px 4px rgba(0, 0, 0, 0.2)"})},logoStyles:{type:Object,default:()=>({width:"20px",height:"20px",marginRight:"10px"})}},setup(i){const r=i;return(c,o)=>(e.openBlock(),e.createElementBlock("div",{style:e.normalizeStyle(r.buttonStyles)},[e.createElementVNode("img",{src:e.unref(a),alt:"Google Logo",style:e.normalizeStyle(r.logoStyles)},null,12,u),o[0]||(o[0]=e.createElementVNode("span",null,"Sign in with Google",-1))],4))}}},Symbol.toStringTag,{value:"Module"}));return d});