সাইন ইন উইথ গুগল বোতামটি প্রদর্শন করুন

ব্যবহারকারীদের আপনার ওয়েব অ্যাপে সাইন-আপ বা সাইন-ইন করতে সক্ষম করতে আপনার সাইটে Google এর সাথে একটি সাইন ইন বোতাম যোগ করুন। বোতাম রেন্ডার করতে HTML বা JavaScript ব্যবহার করুন এবং বোতামের আকৃতি, আকার, পাঠ্য এবং থিম কাস্টমাইজ করার জন্য বৈশিষ্ট্যগুলি ব্যবহার করুন৷

ব্যক্তিগতকৃত সাইন-ইন বোতাম।

একজন ব্যবহারকারী একটি Google অ্যাকাউন্ট নির্বাচন করার পরে এবং তাদের সম্মতি প্রদান করার পরে, Google একটি JSON ওয়েব টোকেন (JWT) ব্যবহার করে ব্যবহারকারীর প্রোফাইল শেয়ার করে। সাইন-ইন এবং ব্যবহারকারীর অভিজ্ঞতার সময় জড়িত পদক্ষেপগুলির একটি সংক্ষিপ্ত বিবরণের জন্য এটি কীভাবে কাজ করে দেখুন। ব্যক্তিগতকৃত বোতামটি ব্যবহারকারীদের কাছে বোতামটি কীভাবে প্রদর্শিত হবে তা প্রভাবিত করে এমন বিভিন্ন শর্ত এবং অবস্থা পর্যালোচনা করে বুঝুন ।

পূর্বশর্ত

আপনার লগইন পৃষ্ঠায় বোতাম যোগ করার আগে নিম্নলিখিতটি সম্পূর্ণ করুন:

বোতাম রেন্ডারিং

Google বোতাম দিয়ে সাইন ইন প্রদর্শন করতে, আপনি আপনার লগইন পৃষ্ঠায় বোতামটি রেন্ডার করতে HTML বা JavaScript বেছে নিতে পারেন:

এইচটিএমএল

আপনার প্ল্যাটফর্মের লগইন এন্ডপয়েন্টে JWT ফেরত দিয়ে HTML ব্যবহার করে সাইন-ইন বোতামটি রেন্ডার করুন।

<html>
  <body>
    <script src="https://accounts.google.com/gsi/client" async></script>
    <div id="g_id_onload"
        data-client_id="YOUR_GOOGLE_CLIENT_ID"
        data-login_uri="https://your.domain/your_login_endpoint"
        data-auto_prompt="false">
    </div>
    <div class="g_id_signin"
        data-type="standard"
        data-size="large"
        data-theme="outline"
        data-text="sign_in_with"
        data-shape="rectangular"
        data-logo_alignment="left">
    </div>
  <body>
</html>

একটি g_id_signin ক্লাস সহ একটি উপাদান Google বোতামের সাথে সাইন ইন হিসাবে রেন্ডার করে৷ বোতামটি ডেটা অ্যাট্রিবিউটে প্রদত্ত পরামিতি দ্বারা কাস্টমাইজ করা হয়।

একই পৃষ্ঠায় Google বোতাম এবং Google One ট্যাপ দিয়ে একটি সাইন ইন প্রদর্শন করতে, data-auto_prompt="false" সরান। ঘর্ষণ কমাতে এবং সাইন-ইন রেট উন্নত করতে এটি সুপারিশ করা হয়।

ডেটা অ্যাট্রিবিউটের সম্পূর্ণ তালিকার জন্য, g_id_signin রেফারেন্স পৃষ্ঠাটি দেখুন

জাভাস্ক্রিপ্ট

ব্রাউজারের জাভাস্ক্রিপ্ট কলব্যাক হ্যান্ডলারে JWT ফিরিয়ে দিয়ে JavaScript ব্যবহার করে সাইন-ইন বোতামটি রেন্ডার করুন।

<html>
  <body>
    <script src="https://accounts.google.com/gsi/client" async></script>
    <script>
      function handleCredentialResponse(response) {
        console.log("Encoded JWT ID token: " + response.credential);
      }
      window.onload = function () {
        google.accounts.id.initialize({
          client_id: "YOUR_GOOGLE_CLIENT_ID"
          callback: handleCredentialResponse
        });
        google.accounts.id.renderButton(
          document.getElementById("buttonDiv"),
          { theme: "outline", size: "large" }  // customization attributes
        );
        google.accounts.id.prompt(); // also display the One Tap dialog
      }
    </script>
    <div id="buttonDiv"></div>
  </body>
</html>

renderButton জন্য প্রথম প্যারামিটার হিসাবে নির্দিষ্ট করা উপাদানটি Google বোতামের সাথে সাইন ইন হিসাবে প্রদর্শন করে৷ এই উদাহরণে buttonDiv পৃষ্ঠার বোতাম রেন্ডার করতে ব্যবহৃত হয়। বোতামটি renderButton জন্য দ্বিতীয় প্যারামিটারে নির্দিষ্ট বৈশিষ্ট্যগুলি ব্যবহার করে কাস্টমাইজ করা হয়েছে।

ব্যবহারকারীর ঘর্ষণ কমাতে google.accounts.id.prompt() সাইন-আপ বা সাইন-ইন করার জন্য বোতামটি ব্যবহার করার দ্বিতীয় বিকল্প হিসাবে ওয়ান ট্যাপ প্রদর্শন করতে বলা হয়।

জিআইএস লাইব্রেরি এইচটিএমএল ডক পার্স করে একটি আইডি অ্যাট্রিবিউট সহ উপাদানগুলির জন্য যা g_id_onload এ সেট করা হয়েছে, বা g_id_signin ধারণকারী ক্লাস অ্যাট্রিবিউট। যদি একটি ম্যাচিং উপাদান পাওয়া যায়, তাহলে আপনি জাভাস্ক্রিপ্টে বোতামটি রেন্ডার করে থাকলে তা নির্বিশেষে HTML ব্যবহার করে বোতামটি রেন্ডার করা হয়। বোতামটি দুবার প্রদর্শন এড়াতে, সম্ভবত বিরোধপূর্ণ পরামিতিগুলির সাথে আপনার HTML পৃষ্ঠাগুলিতে এই নামের সাথে মিলে যাওয়া HTML উপাদানগুলি অন্তর্ভুক্ত করবেন না৷

বোতামের ভাষা

বোতামের ভাষা স্বয়ংক্রিয়ভাবে ব্রাউজারের ডিফল্ট ভাষা বা Google সেশন ব্যবহারকারীর পছন্দ দ্বারা নির্ধারিত হয়। এছাড়াও আপনি লাইব্রেরি লোড করার সময় src নির্দেশে hl প্যারামিটার এবং ভাষা কোড যোগ করে এবং HTML-এ ঐচ্ছিক ডেটা-লোকেল বা লোকেল প্যারামিটার ডেটা-লোকেল বা JavaScript-এ লোকেল যোগ করে নিজে ভাষা বেছে নিতে পারেন।

এইচটিএমএল

নিম্নলিখিত কোড স্নিপেটটি দেখায় কিভাবে ক্লায়েন্ট লাইব্রেরির URL-এ hl প্যারামিটার যোগ করে এবং ফরাসি ভাষায় data-locale বৈশিষ্ট্য সেট করে ফরাসি ভাষায় বোতামের ভাষা প্রদর্শন করা যায়:

<script src="https://accounts.google.com/gsi/client?hl=fr" async></script>
<div class="g_id_signin" data-locale="fr">
</div>

জাভাস্ক্রিপ্ট

নিম্নলিখিত কোড স্নিপেট দেখায় কিভাবে ক্লায়েন্ট লাইব্রেরির URL-এ hl প্যারামিটার যোগ করে এবং google.accounts.id.renderButton পদ্ধতিতে কল করে ফরাসি ভাষায় বোতামের ভাষা প্রদর্শন করা যায় এবং locale প্যারামিটার ফরাসিতে সেট করা হয়:

<script src="https://accounts.google.com/gsi/client?hl=fr" async></script>
<script>
  google.accounts.id.renderButton(
    document.getElementById("buttonDiv"),
    { locale: "fr" }
  );
</script>

শংসাপত্র হ্যান্ডলিং

ব্যবহারকারীর সম্মতি দেওয়ার পরে, Google ব্যবহারকারীর ব্রাউজারে বা সরাসরি আপনার প্ল্যাটফর্ম দ্বারা হোস্ট করা লগইন এন্ডপয়েন্টে আইডি টোকেন হিসাবে পরিচিত একটি JSON ওয়েব টোকেন (JWT) শংসাপত্র ফেরত দেয়।

আপনি যেখানে JWT গ্রহণ করতে চান তা নির্ভর করে আপনি যদি HTML বা JavaScript ব্যবহার করে বোতামটি রেন্ডার করেন এবং পপআপ বা রিডাইরেক্ট UX মোড ব্যবহার করেন কিনা তার উপর।

popup UX মোড ব্যবহার করে একটি পপ-আপ উইন্ডোতে সাইন-ইন UX প্রবাহ সম্পাদন করে। এটি সাধারণত ব্যবহারকারীদের জন্য একটি কম অনুপ্রবেশকারী অভিজ্ঞতা এবং এটি ডিফল্ট UX মোড।

ব্যবহার করে বোতাম রেন্ডার করার সময়:

এইচটিএমএল

আপনি হয় সেট করতে পারেন:

  • আপনার কলব্যাক হ্যান্ডলারে JWT ফেরত দিতে data-callback , অথবা
  • একটি POST অনুরোধ ব্যবহার করে সরাসরি আপনার লগইন এন্ডপয়েন্টে JWT পাঠাতে Google-এর জন্য data-login_uri ।

উভয় মান সেট করা থাকলে, data-callback data-login_uri এর চেয়ে অগ্রাধিকার পায়। ডিবাগিংয়ের জন্য কলব্যাক হ্যান্ডলার ব্যবহার করার সময় উভয় মান সেট করা সহায়ক হতে পারে।

জাভাস্ক্রিপ্ট

আপনাকে অবশ্যই একটি callback নির্দিষ্ট করতে হবে, জাভাস্ক্রিপ্টে বোতামটি রেন্ড করার সময় পপআপ মোড পুনঃনির্দেশ সমর্থন করে না। সেট করা থাকলে, login_uri উপেক্ষা করা হয়।

আপনার JS কলব্যাক হ্যান্ডলারের মধ্যে JWT ডিকোড করার বিষয়ে আরও তথ্যের জন্য প্রত্যাবর্তিত শংসাপত্রের প্রতিক্রিয়া হ্যান্ডেল দেখুন।

রিডাইরেক্ট মোড

redirect UX মোড ব্যবহার করে ব্যবহারকারীর ব্রাউজারের সম্পূর্ণ পৃষ্ঠা পুনঃনির্দেশ ব্যবহার করে সাইন-ইন UX ফ্লো সঞ্চালন করে এবং Google একটি POST অনুরোধ ব্যবহার করে সরাসরি আপনার লগইন এন্ডপয়েন্টে JWT ফেরত দেয়। এটি সাধারণত ব্যবহারকারীদের জন্য একটি আরও অনুপ্রবেশকারী অভিজ্ঞতা, তবে এটি সবচেয়ে নিরাপদ সাইন-ইন পদ্ধতি হিসাবে বিবেচিত হয়৷

ব্যবহার করে বোতাম রেন্ডার করার সময়:

  • HTML ঐচ্ছিকভাবে আপনার লগইন এন্ডপয়েন্টের URI-তে data-login_uri সেট করে।
  • JavaScript ঐচ্ছিকভাবে আপনার লগইন এন্ডপয়েন্টের URI-তে login_uri সেট করে।

আপনি একটি মান প্রদান না করলে, Google বর্তমান পৃষ্ঠার URI-তে JWT ফেরত দেয়।

আপনার লগইন শেষ পয়েন্ট URI

data-login_uri বা login_uri সেট করার সময় HTTPS এবং একটি পরম URI ব্যবহার করুন। উদাহরণস্বরূপ, https://example.com/path ।

বিকাশের সময় স্থানীয় হোস্ট ব্যবহার করার সময়ই HTTP অনুমোদিত: http://localhost/path ।

Google-এর প্রয়োজনীয়তা এবং বৈধতা নিয়মের সম্পূর্ণ বিবরণের জন্য সুরক্ষিত জাভাস্ক্রিপ্ট উত্স ব্যবহার করুন এবং ইউআরআই পুনর্নির্দেশ করুন ।