ইন্টিগ্রেশন বিবেচনা

এই ধাপে ধাপে নির্দেশিকা আপনাকে সমস্ত প্রধান ইন্টিগ্রেশন সংক্রান্ত বিষয়ে সিদ্ধান্ত নিতে সাহায্য করে।

বিমূর্ত Google এর সাথে সাইন ইন করুন

নীচে ব্যবহারকারীদের আপনার ওয়েবসাইটে সাইন-ইন/সাইন-আপ করার জন্য সাধারণ পদক্ষেপগুলি রয়েছে৷

  1. ব্যবহারকারীরা একটি Google ওয়েবসাইটে সাইন ইন করুন।

    কাজ করার জন্য Google এর সাথে সাইন ইন করার জন্য, ব্রাউজারে একটি সক্রিয় Google সেশন থাকা উচিত৷ ওয়ান ট্যাপ এবং স্বয়ংক্রিয় সাইন-ইন শুধুমাত্র তখনই ট্রিগার হয় যখন ব্যবহারকারীরা আপনার ওয়েব পেজ লোড করার আগে Google-এ সাইন ইন করে থাকে। এই ধাপটি Google বোতাম ফ্লো দিয়ে সাইন ইন করার জন্য ঐচ্ছিক, যেহেতু বোতাম টিপলে ব্যবহারকারীদেরকে Google-এ সাইন ইন করতে বলা হয়।

  2. ব্যবহারকারীরা আপনার ওয়েব পৃষ্ঠাগুলি ব্রাউজ করে যেখানে ওয়ান ট্যাপ, স্বয়ংক্রিয় সাইন-ইন বা Google বোতাম দিয়ে সাইন ইন করা আছে।

  3. ব্যবহারকারীরা ওয়ান ট্যাপ, সাইন ইন উইথ গুগল বোতাম এবং পরবর্তী ইউএক্স প্রবাহের সাথে ইন্টারঅ্যাক্ট করে যাতে করে:

    • চালিয়ে যেতে একটি সক্রিয় Google সেশন নির্বাচন করুন।
    • আপনার ওয়েবসাইটের সাথে প্রোফাইল তথ্য শেয়ার করার জন্য শেষ ব্যবহারকারীদের কাছ থেকে সম্মতি পান, যদি এখনও সম্মতি না দিয়ে থাকেন।

    যখন ব্রাউজারে শুধুমাত্র একটি সক্রিয় Google সেশন থাকে,

    • এক ট্যাপ স্বয়ংক্রিয়ভাবে একমাত্র সেশন নির্বাচন করে, এবং এইভাবে অ্যাকাউন্ট চয়নকারী পৃষ্ঠাটি এড়িয়ে যায়।
    • Google এর সাথে সাইন ইন বোতামটি অ্যাকাউন্ট চয়নকারী পৃষ্ঠায় থাকে, যা ব্যবহারকারীদের প্রয়োজনে নতুন একটি Google সেশন যোগ করতে দেয়।

    যদি নির্বাচিত Google অ্যাকাউন্টটি আগে আপনার ওয়েবসাইটে ব্যবহার না করা হয় বা অনুমতি প্রত্যাহার করা হয়, তাহলে একটি সম্মতি পৃষ্ঠা প্রদর্শিত হবে।

    Google বোতামের সম্মতি দিয়ে সাইন ইন করুন

    একবার অনুমোদিত হলে, Google সিদ্ধান্তটি রেকর্ড করবে, যাতে পরবর্তী সময়ের জন্য সম্মতি পৃষ্ঠাটি এড়িয়ে যেতে পারে।

  4. একটি JSON ওয়েব টোকেন (আইডি টোকেন হিসাবেও উল্লেখ করা হয়) ব্যবহারকারীর নাম, ইমেল এবং প্রোফাইল ছবি সম্বলিত শংসাপত্র জাভাস্ক্রিপ্ট কলব্যাক হ্যান্ডলার বা আপনার ব্যাকএন্ড পরিষেবাতে একটি পোস্ট জমা দিয়ে শেয়ার করা হয়।

    ক্লায়েন্ট সাইডে জাভাস্ক্রিপ্ট কলব্যাক হ্যান্ডলারে আইডি টোকেন ফেরত দেওয়ার উদ্দেশ্য, জাভাস্ক্রিপ্ট কোডে এটিকে ডিকোড করা আপনার জন্য নয়, তবে আপনার নিজের উপায়ে এটি আপনার সার্ভারে জমা দেওয়া। একটি ভাল উদাহরণ হল একটি XmlHttpRequest ব্যবহার করা পোস্ট জমা দেওয়ার কারণে পৃষ্ঠা পুনরায় লোড হওয়া এড়াতে।

  5. আপনার সার্ভারের দিকে, Google-এর জারি করা JWT শংসাপত্রটি যাচাই করা হয় এবং একটি নতুন অ্যাকাউন্ট তৈরি করতে বা আপনার ওয়েবসাইটে একটি প্রমাণীকৃত সেশন স্থাপন করতে ব্যবহার করা হয়।

    আপনি আপনার নিজের ওয়েবসাইটে ব্যবহারকারী সাইন-ইন অবস্থা পরিচালনা করবেন।

    ব্যবহারকারীর Google অ্যাকাউন্ট সাইন-ইন স্থিতি এবং আপনার অ্যাপ একে অপরের থেকে স্বাধীন, সাইন-ইন মুহূর্ত ব্যতীত যখন আপনি জানেন যে ব্যবহারকারী সফলভাবে প্রমাণীকরণ করেছে এবং তাদের Google অ্যাকাউন্টে সাইন ইন করেছে৷ ব্যবহারকারীরা সাইন ইন থাকতে পারে, তারা সাইন আউট করতে পারে, বা আপনার ওয়েবসাইটে একটি সক্রিয়, সাইন-ইন সেশন বজায় রাখার সময় একটি ভিন্ন Google অ্যাকাউন্টে স্যুইচ করতে পারে।

সংক্ষেপে, পাসওয়ার্ড-ভিত্তিক লগইনের মতো, Google এর সাথে সাইন ইন ওয়েবে ব্যবহারকারীদের প্রমাণীকরণের আরেকটি উপায় প্রদান করে ৷ প্রমাণীকরণের পর আপনার ওয়েবসাইটে সেশন ম্যানেজমেন্টের জন্য Google-এর মাধ্যমে সাইন ইন কোনো বৈশিষ্ট্য প্রদান করে না।

Google API এবং পরিষেবাগুলি অ্যাক্সেস করুন৷

উপরে বর্ণিত হিসাবে আপনি প্রমাণীকরণ API একীভূত করার সময়, আপনার সাইটের যদি প্রমাণীকৃত ব্যবহারকারীদের পক্ষে Google API এবং পরিষেবাগুলি অ্যাক্সেস করার প্রয়োজন হয় তবে আপনাকে অনুমোদন API সংহত করতে হতে পারে। প্রমাণীকরণ ব্যবহারকারীদের প্রমাণীকরণের জন্য আপনার সাইটটিকে আইডি টোকেন প্রদান করে, অনুমোদন আপনার সাইটকে (আলাদা) অ্যাক্সেস টোকেন এবং Google API এবং পরিষেবাগুলি ব্যবহার করার অনুমতি প্রদান করে। আরও তথ্যের জন্য ওয়েবের অনুমোদন দেখুন।

প্রমাণীকরণ এবং অনুমোদনের জন্য UX পৃথকীকরণ

যদি আপনার ওয়েবসাইটকে প্রমাণীকরণ এবং অনুমোদন API- উভয়ই কল করার প্রয়োজন হয়, তাহলে আপনাকে অবশ্যই আলাদাভাবে বিভিন্ন মুহুর্তে কল করতে হবে। প্রমাণীকরণ এবং অনুমোদনের মুহূর্তগুলি আলাদা করা দেখুন।

যদি আপনার ওয়েবসাইট অতীতে একত্রে প্রমাণীকরণ এবং অনুমোদনের টোকেনগুলির জন্য অনুরোধ করে থাকে, Google পরিচয় পরিষেবা জাভাস্ক্রিপ্ট লাইব্রেরি ব্যবহার করার সময়, অনুমোদনের মুহূর্ত থেকে প্রমাণীকরণের মুহূর্তটিকে আলাদা করতে আপনাকে আপনার UX সামঞ্জস্য করতে হবে।

  • প্রমাণীকরণের মুহুর্তে, ব্যবহারকারীদের আপনার ওয়েবসাইটে সাইন ইন বা সাইন আপ করতে দেওয়ার জন্য আপনার ওয়েবসাইট ওয়ান ট্যাপ, স্বয়ংক্রিয় সাইন-ইন বা Google বোতাম দিয়ে সাইন ইন করতে পারে।
  • অনুমোদনের মুহুর্তে, আপনার ওয়েবসাইট Google API বা পরিষেবাগুলি অ্যাক্সেস করার অনুমতি এবং টোকেন পেতে অনুমোদন API-কে আহ্বান করতে পারে।

একটি মসৃণ UX রূপান্তর এবং জটিলতা হ্রাসের জন্য, একটি সাধারণ অনুশীলন হল প্রক্রিয়াটিকে দুটি পৃথক ধাপে বিভক্ত করা।

  1. প্রমাণীকরণ এবং অনুমোদনের মুহূর্তগুলিকে আলাদা করতে UX রিফ্যাক্টর করুন।
  2. Google Identity Services JavaScript লাইব্রেরিতে মাইগ্রেট করুন।

HTML API বনাম জাভাস্ক্রিপ্ট API

আপনার ওয়েব পৃষ্ঠাগুলিতে ওয়ান ট্যাপ, স্বয়ংক্রিয় সাইন-ইন বা Google বোতামের মাধ্যমে সাইন ইন করতে আপনি HTML API বা JavaScript API ব্যবহার করতে পারেন।

HTML API এর সাথে, আপনার আরও বিল্ট-ইন বৈশিষ্ট্য রয়েছে। উদাহরণ স্বরূপ,

  • রেন্ডারিং ওয়ান ট্যাপ বা পৃষ্ঠা লোড করার সময় Google বোতামের মাধ্যমে সাইন ইন করুন।
  • আপনার সার্ভার সাইড এন্ডপয়েন্টে প্রত্যাবর্তিত শংসাপত্র জমা দিন, যা data-login_uri অ্যাট্রিবিউট দ্বারা নির্দিষ্ট করা হয়েছে, ওয়ান ট্যাপ করার পরে, স্বয়ংক্রিয় সাইন-ইন বা বোতাম পপ-আপ/পুনঃনির্দেশ UX সম্পন্ন হয়৷
  • ডাবল-সাবমিট-কুকি দ্বারা CSRF আক্রমণ প্রতিরোধ করুন।
  • HTML কোড তৈরি করতে কোড জেনারেটর ব্যবহার করুন, তারপর শুধু আপনার HTML পৃষ্ঠাগুলিতে অনুলিপি করুন।

HTML API এর সাথে, আপনি আচরণ কাস্টমাইজ করতে কিছু জাভাস্ক্রিপ্টও লিখতে পারেন।

  • আপনি আপনার নিজস্ব কলব্যাক হ্যান্ডলার লিখতে পারেন, তারপরে data-callback অ্যাট্রিবিউটে ফাংশনের নাম সেট করুন। একটি ভাল উদাহরণ হল আপনার সার্ভারে ফিরে আসা শংসাপত্র জমা দেওয়ার জন্য একটি XmlHttpRequest ব্যবহার করা, ডিফল্ট পোস্ট জমা দেওয়ার কারণে পৃষ্ঠা পুনরায় লোড হওয়া এড়াতে।

JavaScript API এর সাথে, নিচের মত কিছু পরিস্থিতিতে আপনার আরও নমনীয়তা আছে।

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

এইচটিএমএল এপিআই কোড শুধুমাত্র একবার পৃষ্ঠা অনলোড ইভেন্টে বা Google আইডেন্টিটি সার্ভিসেস জাভাস্ক্রিপ্ট লাইব্রেরি অনলোড ইভেন্টে, যেটি পরে আসে তা একবারই ব্যবহার করা যেতে পারে। যদি HTML API আচরণ আপনার প্রত্যাশা পূরণ না করে তবে আপনার JavaScript API ব্যবহার করা উচিত।

পৃষ্ঠাটি শুরু করার জন্য বা ওয়ান ট্যাপ এবং বোতাম রেন্ডারিংয়ের জন্য একই ওয়েব পৃষ্ঠাতে JavaScript API-এর সাথে HTML API ব্যবহার করবেন না। আপনার কোড চেক করুন, HTML এবং JavaScript উভয় জায়গার জন্য যেখানে তারা ওভারল্যাপ হতে পারে। নিম্নলিখিত নোট করুন:

  • আপনি HTML API ব্যবহার করছেন যদি আপনার HTML কোডে <div id='g_id_onload' ... ><id> বা <div class='g_id_signin' ...></div> এর এক বা একাধিক উপাদান বিদ্যমান থাকে।
  • আপনি JavaScript API ব্যবহার করছেন যদি initialize() , prompt() , বা render() এর মধ্যে এক বা একাধিক পদ্ধতি আপনার জাভাস্ক্রিপ্ট কোডে চালু করা হয়, সেগুলি আলাদা করা জাভাস্ক্রিপ্ট ফাইল থেকে ইনলাইন করা বা লোড করা হোক না কেন।

নিম্নোক্ত জাভাস্ক্রিপ্ট এপিআইগুলি শুরু করা বা ওয়ান ট্যাপ এবং বোতাম রেন্ডারিং থেকে স্বাধীনভাবে ব্যবহার করা যেতে পারে; এইগুলির সংশ্লিষ্ট HTML API নেই:

Google বোতাম বিবেচনা করে সাইন ইন করুন

পপ-আপ বনাম পুনঃনির্দেশ

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

পপ-আপ UX-এর সাহায্যে, পরিচয় প্রদানকারীকে পপ-আপ উইন্ডো থেকে OAuth প্রতিক্রিয়াগুলি পাস করার জন্য ক্লায়েন্ট-সাইড ক্রস-অরিজিন যোগাযোগ চ্যানেল তৈরি করতে হবে, যেখানে পরিচয় প্রদানকারীর সম্মতি পৃষ্ঠা প্রদর্শিত হচ্ছে, প্রধান উইন্ডোতে, যেখানে তৃতীয়টি -পার্টি পেজ প্রদর্শিত হচ্ছে। সাধারণত উইন্ডোজ জুড়ে OAuth প্রতিক্রিয়া পাঠাতে এবং গ্রহণ করতে উভয় দিকে জাভাস্ক্রিপ্ট কোডের প্রয়োজন হয়।

পপ-আপ এবং রিডাইরেক্ট UX উভয়ই Google এর সাথে সাইন ইন বোতাম দ্বারা সমর্থিত। ডিফল্টরূপে, পপ-আপ UX ব্যবহার করা হয়। আপনি data-ux_mode অ্যাট্রিবিউট সেট করে UX পরিবর্তন করতে পারেন।

Google বোতাম রিডাইরেক্ট ফ্লো এবং OAuth রিডাইরেক্ট ফ্লো দিয়ে সাইন ইন করার মধ্যে কিছু পার্থক্য রয়েছে।

  • Google বোতামের সাথে সাইন ইন করুন পুনঃনির্দেশ প্রবাহ সর্বদা আপনার ওয়েব সার্ভারে শংসাপত্র জমা দিতে POST পদ্ধতি ব্যবহার করে, যেখানে OAuth পুনঃনির্দেশ সাধারণত GET পদ্ধতি ব্যবহার করে।
  • Google বোতাম রিডাইরেক্ট ফ্লো দিয়ে সাইন ইন করে জমা দেওয়া প্যারামিটারগুলি OAuth রিডাইরেক্ট ফ্লো থেকে আলাদা।

HTML API ব্যবহারকারী ডেভেলপারদের জন্য, UX যেটাই ব্যবহার করা হোক না কেন, শংসাপত্রগুলি সর্বদা POST পদ্ধতি এবং একই প্যারামিটার সহ data-login_uri এ জমা দেওয়া হয়। এটি আপনাকে অন্য কোড পরিবর্তন ছাড়াই UX মোডে স্যুইচ করতে দেয়। রিডাইরেক্ট UX-এর জন্য, Google APIs কনসোলে আপনার ক্লায়েন্টের জন্য অনুমোদিত রিডাইরেক্ট URI- তে data-login_uri যোগ করতে হবে।

বোতাম কাস্টমাইজেশন

আপনার নিজের বোতাম ব্যবহার করা সমর্থিত নয়। প্রোগ্রাম্যাটিকভাবে একটি বোতাম প্রবাহ শুরু করার জন্য কোন API নেই।

Google বোতাম ফ্লো দিয়ে সাইন ইন সক্ষম করতে, আপনাকে যা করতে হবে তা হল আপনার ওয়েব পৃষ্ঠাগুলিতে এক বা একাধিক Google বোতাম দিয়ে সাইন ইন করুন৷ ব্যবহারকারীরা যখন এই বোতামগুলিতে ক্লিক করেন তখন বোতাম প্রবাহ শুরু হয় এবং স্বচ্ছভাবে পরিচালনা করা হয়।

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

ওয়েবসাইটগুলিকে বোতামগুলি রেন্ডার করতে ব্যক্তিগতকৃত তথ্য ব্যবহার করা উচিত কিনা তা নিয়ন্ত্রণ করার অনুমতি দেওয়ার জন্য কোনও API নেই৷ সমস্ত শর্ত পূরণ হলে ব্যক্তিগতকৃত বোতামগুলি প্রদর্শিত হয়। আন্ডারস্ট্যান্ড পার্সোনালাইজড বোতামে আরও বিস্তারিত দেখুন।

আপনি একই ওয়েব পেজে একাধিক বোতাম রাখতে পারেন। কোড জেনারেটর প্রতিবার শুধুমাত্র একটি বোতাম তৈরি করতে পারে। আপনি এটি বেশ কয়েকবার চালাতে পারেন, এবং তৈরি করা <div class='g_id_signin' ...></div> কোডটি ওয়েব পেজে কপি করতে পারেন।

বোতাম রেন্ডারিং সেরা অনুশীলন

গোপনীয়তার কারণে, ব্যক্তিগতকৃত বোতামটি accounts.google.com ডোমেন থেকে একটি iframe-এ দেখানো হয়েছে। একটি ধীর নেটওয়ার্কে একটি iframe লোড করা সময়সাপেক্ষ হতে পারে৷ এই লেটেন্সি সমস্যা প্রশমিত করতে, বোতামগুলি 2টি ধাপে রেন্ডার করা হয়েছে, নিম্নরূপ:

  1. একটি ইনলাইন বোতাম সংস্করণ আপনার ওয়েবসাইটের DOM ট্রিতে রেন্ডার করা হয়েছে৷ এটি শুধুমাত্র একটি পাঠ্য বোতাম, কোনো ব্যক্তিগতকৃত তথ্য ব্যবহার করা যাবে না। উদ্দেশ্য হল ব্যবহারকারীদের যত তাড়াতাড়ি সম্ভব বোতামটি দেখতে দেওয়া।
  2. আইফ্রেম বোতামটি লোড করার জন্য একটি iframe অনুরোধ Google-এ পাঠানো হয়, যাতে ব্যক্তিগতকৃত তথ্য থাকতে পারে। একবার আইফ্রেম বোতামটি লোড হয়ে গেলে, ইনলাইন সংস্করণ বোতামটি সরানো হয়।

Google বোতাম ফ্লো বোতাম দিয়ে সাইন ইন করার লেটেন্সি কমানোর জন্য কিছু সেরা অনুশীলন নীচে তালিকাভুক্ত করা হয়েছে।

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

এক ট্যাপ বিবেচনা

স্বয়ংক্রিয় সাইন-ইন

বাতিলযোগ্য স্বয়ংক্রিয় সাইন-ইন নিম্নলিখিত সুবিধা প্রদান করে।

  • এটি একটি ব্যবহারকারীর ক্রিয়া সংরক্ষণ করে সাইন-ইন রেট উন্নত করতে পারে৷
  • পূর্বের, অবলুপ্ত Google সাইন-ইন জাভাস্ক্রিপ্ট লাইব্রেরি দ্বারা প্রদত্ত নীরব সাইন-ইন থেকে ভিন্ন, স্বয়ংক্রিয় সাইন-ইন হওয়ার সময় ব্যবহারকারীরা সর্বদা কিছু UI দেখতে পান, যা তাদের কেন এবং কীভাবে তারা আপনার ওয়েবসাইটে সাইন ইন করেছে তার প্রসঙ্গ দেয়। ব্যবহারকারীরা চাইলে বাতিল করার ক্ষমতাও রাখে।
  • এটি স্বয়ংক্রিয়ভাবে ব্যবহারকারীর আগে ব্যবহার করা অ্যাকাউন্ট নির্বাচন করে, যা ব্যবহারকারীকে আপনার ওয়েবসাইটে ডুপ্লিকেট অ্যাকাউন্ট তৈরি করতে বাধা দিতে পারে।

স্বয়ংক্রিয় সাইন-ইন সক্ষম করতে হবে কিনা তা আপনার ওয়েবসাইটের UX এবং ব্যবসার প্রয়োজনীয়তার উপর ভিত্তি করে আপনাকে একটি সিদ্ধান্ত নিতে হবে। বিশেষ করে যদি আপনার ওয়েবসাইট থেকে বেশিরভাগ লগআউট স্পষ্ট ব্যবহারকারীর পছন্দের পরিবর্তে সেশন টাইমআউটের কারণে হয়, তাহলে স্বয়ংক্রিয় সাইন-ইন আপনার ব্যবহারকারীদের সেশন স্থিতি পুনরুদ্ধার করার জন্য একটি ভাল উপায় হতে পারে।

কখন ওয়ান ট্যাপ UI প্রদর্শন করতে হবে

HTML API এর সাথে, One Tap সর্বদা পৃষ্ঠা লোডে প্রদর্শিত হয়। জাভাস্ক্রিপ্ট এপিআই-এর সাহায্যে, ওয়ান ট্যাপ ইউআই প্রদর্শিত হলে তা নিয়ন্ত্রণ করার ক্ষমতা আপনার আছে। উল্লেখ্য, নিচে বর্ণিত কিছু কারণে, API চালু করার পরে One Tap UI সবসময় প্রদর্শিত নাও হতে পারে।

একটি বোতাম ক্লিক ইভেন্টে শুধুমাত্র এক ট্যাপ UI প্রদর্শন করার চেষ্টা করবেন না। উপরের কারণগুলির কারণে One Tap UI প্রদর্শিত নাও হতে পারে এবং ব্যবহারকারীদের একটি ভাঙা UX থাকতে পারে, যেহেতু ব্যবহারকারীর অ্যাকশনের পরে কিছুই প্রদর্শিত হয় না। একটি বোতাম ক্লিক ইভেন্টে:

প্রস্তাবিত

  • আপনার লগইন ডায়ালগ দেখান পাসওয়ার্ড লগইন এবং সাইন ইন উইথ Google বোতাম এবং একই সময়ে One Tap API কল করুন। এটি নিশ্চিত করে যে ব্যবহারকারীদের সর্বদা আপনার ওয়েবসাইটের জন্য সাইন-ইন করার কিছু পদ্ধতি অফার করা হয়।

প্রস্তাবিত নয়

  • শুধুমাত্র একটি ট্যাপ অফার করে, ব্যবহারকারীরা একটি ভাঙা সাইন-ইন অভিজ্ঞতা অনুভব করতে পারে যদি ওয়ান ট্যাপ প্রদর্শিত না হয়।
  • একটি UI স্থিতি কলব্যাক ব্যবহার করে অন্য UI দেখানোর জন্য যদি এক ট্যাপ প্রদর্শিত না হয়। এটি সুপারিশ করা হয় না কারণ UI স্ট্যাটাস কলব্যাক ভবিষ্যতে রিলিজে ফেডারেটেড শংসাপত্র ব্যবস্থাপনার সাথে ভাল কাজ নাও করতে পারে।

ITP ব্রাউজারগুলিতে এক ট্যাপ করুন

ইন্টেলিজেন্ট ট্র্যাকিং প্রিভেনশন (ITP) এর কারণে, সাধারণ One Tap UX ITP ব্রাউজারে কাজ করে না, যেমন iOS, Safari এবং Firefox-এ Chrome। পরিবর্তে এই ব্রাউজারগুলিতে একটি স্বাগত পৃষ্ঠা দিয়ে শুরু হওয়া একটি ভিন্ন UX প্রদান করা হয়।

আপনি চাইলে ITP ব্রাউজারে One Tap UX অক্ষম করা যেতে পারে। আরও বিশদ বিবরণের জন্য ITP ব্রাউজারগুলিতে ওয়ান ট্যাপ সমর্থন পড়ুন।

অ-আইটিপি ব্রাউজারগুলিতে এই UX সক্ষম করার কোন উপায় নেই, যেমন Android/macOS/Linux এবং Edge-এ Chrome৷

ব্যবহারকারী দূরে ক্লিক করলে প্রম্পটটি বাতিল করুন

ডিফল্টরূপে, ব্যবহারকারী প্রম্পটের বাইরে ক্লিক করলে ওয়ান ট্যাপ প্রম্পট স্বয়ংক্রিয়ভাবে বন্ধ হয়ে যায়। আপনি চাইলে এই আচরণ পরিবর্তন করা যেতে পারে।

আপনাকে ডেস্কটপ ওয়েবে ওয়ান ট্যাপ প্রম্পট খোলা রাখার পরামর্শ দেওয়া হচ্ছে, যেহেতু স্ক্রীনের আকার যথেষ্ট বড়।

ওয়ান ট্যাপ ইউএক্সের অবস্থান পরিবর্তন করুন

ডেস্কটপ ওয়েবে, আপনি ওয়ান ট্যাপ প্রম্পটের অবস্থান পরিবর্তন করতে পারেন। যাইহোক, এই বৈশিষ্ট্যটি সুপারিশ করা হয় না কারণ এই বৈশিষ্ট্যটি ভবিষ্যতের প্রকাশে ফেডারেটেড শংসাপত্র ব্যবস্থাপনা দ্বারা সমর্থিত নয়।

সাইন-ইন প্রসঙ্গ পরিবর্তন করুন

এক ট্যাপ আপনার ওয়েবসাইটে একটি বড় UX প্রবাহের অংশ হওয়া উচিত। ডিফল্টরূপে, One Tap UI একটি সাইন-ইন প্রসঙ্গে ব্যবহৃত হয়। UI-এর ভাষাতে বিশেষ শব্দ রয়েছে, যেমন "সাইন ইন"৷ আপনি শব্দের একটি ভিন্ন সেট তৈরি করতে প্রসঙ্গ বৈশিষ্ট্য পরিবর্তন করতে পারেন। আপনি আপনার UX প্রবাহের জন্য সবচেয়ে উপযুক্ত ওয়ান ট্যাপ হেডারগুলির মধ্যে একটি নির্বাচন করতে পারেন।

প্রসঙ্গ
signin "গুগল দিয়ে সাইন ইন করুন"
signup "গুগলের সাথে সাইন আপ করুন"
use "Google এর সাথে ব্যবহার করুন"

ওয়ান ট্যাপ UI স্ট্যাটাসে শুনুন

আপনার বৃহত্তর UX প্রবাহে নির্বিঘ্নে একীভূত করতে, UI স্থিতি পরিবর্তন হলে One Tap আপনাকে অবহিত করতে পারে। যাইহোক, এই বৈশিষ্ট্যটি ভবিষ্যতের ফেডারেটেড ক্রেডেনশিয়াল ম্যানেজমেন্ট রিলিজে সমর্থিত নয়।

সাবডোমেন জুড়ে এক ট্যাপ

ডিফল্টরূপে, ওয়ান ট্যাপ কুলডাউন এবং অন্যান্য স্ট্যাটাস প্রতি-উৎপত্তি ট্র্যাক করা হয়। আপনার ওয়েবসাইট একাধিক সাবডোমেন জুড়ে এক ট্যাপ প্রদর্শন করলে, আপনাকে আপনার API কোডে তা নির্দেশ করতে হবে।

স্ট্যাটিক এইচটিএমএল পৃষ্ঠাগুলিতে এক ট্যাপ

ডিফল্টরূপে, GIS লাইব্রেরি ধরে নেয় আপনার ওয়েব পৃষ্ঠাগুলি গতিশীলভাবে তৈরি হয়েছে। HTML কোড তৈরি করার সময় আপনার HTTP সার্ভার ব্যবহারকারীর লগইন অবস্থা পরীক্ষা করে।

  • যদি কোনো ব্যবহারকারী লগ ইন না করে থাকে, তাহলে ওয়ান ট্যাপ এইচটিএমএল কোড ফলিত পৃষ্ঠায় অন্তর্ভুক্ত করা উচিত, যাতে ব্যবহারকারীদের আপনার ওয়েবসাইটে সাইন ইন করার অনুমতি দেওয়ার জন্য ওয়ান ট্যাপ ট্রিগার করা যায়।
  • যদি ব্যবহারকারীরা ইতিমধ্যেই লগ ইন করে থাকেন, তাহলে ওয়ান-ট্যাপ HTML কোড ফলিত পৃষ্ঠায় অন্তর্ভুক্ত করা উচিত নয়।

এই ক্ষেত্রে, ওয়ান ট্যাপ এইচটিএমএল এপিআই কোড যোগ করা বা সরানোর দায়িত্ব আপনার ওয়েব সার্ভারের।

ওয়ান ট্যাপ এইচটিএমএল এপিআই কোড অন্য উপায়ে কাজ করতে পারে, যা অনেক স্ট্যাটিক HTML কন্টেন্ট হোস্ট করে এমন ওয়েবসাইটগুলির জন্য ডিজাইন করা হয়েছে। আপনি সবসময় আপনার স্ট্যাটিক HTML পৃষ্ঠাগুলিতে One Tap HTML API কোড অন্তর্ভুক্ত করতে পারেন এবং আপনার ওয়েবসাইটে ব্যবহৃত সেশন কুকির নাম উল্লেখ করতে পারেন।

  • সেশন কুকি বিদ্যমান না থাকলে, ওয়ান ট্যাপ ফ্লো ট্রিগার হয়।
  • সেশন কুকি বিদ্যমান থাকলে, ওয়ান ট্যাপ ফ্লো বাদ দেওয়া হয়।

এই ক্ষেত্রে, আপনার ওয়েব পৃষ্ঠায় One Tap HTML API কোডের অস্তিত্বের পরিবর্তে আপনার সেশন কুকি স্থিতি দ্বারা ওয়ান ট্যাপ ফ্লো ট্রিগার করা হবে কিনা তা নিয়ন্ত্রিত হয়৷

সার্ভার সাইড ইন্টিগ্রেশন

ওয়ান ট্যাপ করার পরে, স্বয়ংক্রিয় সাইন-ইন বা Google বোতাম দিয়ে সাইন ইন করুন UX ফ্লো সম্পন্ন হয়, একটি আইডি টোকেন জারি করা হয় এবং আপনার ওয়েবসাইটের সাথে শেয়ার করা হয়। ব্যবহারকারীকে প্রমাণীকরণ করতে, আইডি টোকেন গ্রহণ এবং যাচাই করার জন্য সার্ভারের কিছু পরিবর্তন প্রয়োজন।

UX বিবেচনা

সাধারণত আপনার সার্ভার সাইডে প্রতিক্রিয়াগুলি পরিচালনা করতে আপনার নিজের মূলে একটি HTTP শেষ পয়েন্ট যোগ করতে হবে। নিম্নলিখিত কারণগুলি ফলস্বরূপ UX-এর উপর প্রভাব ফেলতে পারে।

আপনি যে প্রকৃত UX পান তা নীচে বর্ণনা করা হয়েছে।

  1. Google বোতাম দিয়ে সাইন ইন করার জন্য UX মোড রিডাইরেক্ট করুন:

    • HTML API বা JavaScript API ব্যবহার করা হোক না কেন, আপনাকে লগইন URI সেট করতে হবে। প্রতিক্রিয়া পরিচালনা করার জন্য একটি জাভাস্ক্রিপ্ট কলব্যাক ফাংশন ব্যবহার করা অসম্ভব, যেহেতু ব্যবহারকারীদের ইতিমধ্যেই আপনার ওয়েব পৃষ্ঠা থেকে পুনঃনির্দেশিত করা হয়েছে৷
    • UX সারাংশ: Google এর সাথে সাইন ইন বোতামে ক্লিক করার পরে, ব্যবহারকারীরা সেশন নির্বাচন এবং অনুমোদনের জন্য একটি Google UI-তে একটি পূর্ণ-পৃষ্ঠা পুনঃনির্দেশ দেখতে পান। একবার হয়ে গেলে, আপনার নির্দিষ্ট করা লগইন URI-তে একটি পূর্ণ-পৃষ্ঠার POST জমা দেওয়া হয়।
  2. এক ট্যাপ বা Google বোতাম পপ-আপ UX মোড দিয়ে সাইন ইন করার জন্য, যদি JavaScript API ব্যবহার করা হয়, অথবা HTML API ব্যবহার করা হয় এবং একটি JavaScript কলব্যাক ফাংশন প্রদান করা হয়:

    • প্রমাণীকরণ প্রতিক্রিয়াগুলি জাভাস্ক্রিপ্ট কলব্যাক ফাংশনে ফেরত পাঠানো হয়।
    • UX সারাংশ: ওয়ান ট্যাপ প্রম্পট বা একটি পপ-আপ উইন্ডো আপনার ওয়েব পৃষ্ঠার উপরে দেখানো হয়েছে। ব্যবহারকারীরা সেশন নির্বাচন এবং অনুমোদনের জন্য প্রম্পট বা পপ-আপ উইন্ডোতে UX শেষ করার পরে, JavaScript কলব্যাক ফাংশন প্রতিক্রিয়াগুলি গ্রহণ করে। আপনার কলব্যাক ফাংশন কীভাবে আপনার সার্ভারে প্রতিক্রিয়া জমা দেয় তার দ্বারা পরবর্তী UX নির্ধারণ করা হয়।
  3. অন্যথায় (লগইন URI কেস সহ HTML API):

    • প্রমাণীকরণের উত্তরগুলি লগইন URI-তে জমা দেওয়া হয়।
    • UX সারাংশ: ওয়ান ট্যাপ প্রম্পট বা একটি পপ-আপ উইন্ডো আপনার ওয়েব পৃষ্ঠার উপরে দেখানো হয়েছে। ব্যবহারকারীরা সেশন নির্বাচন এবং অনুমোদনের জন্য প্রম্পট বা পপ-আপ উইন্ডোতে UX শেষ করার পরে, আপনার নির্দিষ্ট করা লগইন URL-এ একটি পূর্ণ-পৃষ্ঠা POST জমা দিয়ে প্রমাণীকরণ প্রতিক্রিয়াগুলি জমা দেওয়া হয়।

আপনাকে ওয়ান ট্যাপ প্রতিক্রিয়া এবং সাইন ইন Google বোতাম প্রতিক্রিয়াগুলি জমা দেওয়ার জন্য একটি ধারাবাহিক উপায় ব্যবহার করার পরামর্শ দেওয়া হচ্ছে৷

নিরাপত্তা বিবেচনা

ক্রস-সাইট অনুরোধ জালিয়াতি আক্রমণ প্রতিরোধ করতে,

  • Google আইডেন্টিটি সার্ভিস ক্লায়েন্ট জাভাস্ক্রিপ্ট লাইব্রেরি দ্বারা ট্রিগার করা পোস্ট জমা দেওয়ার জন্য, আপনি বিল্ট-ইন ডাবল-সাবমিট-কুকি প্যাটার্ন ব্যবহার করতে পারেন। আরো বিস্তারিত জানার জন্য আপনার সার্ভার সাইডে Google ID টোকেন যাচাই করুন।
  • একটি XmlHttpRequest ব্যবহার করে আপনার নিজের মূলে জমা দেওয়ার জন্য, আপনি কাস্টম HTTP শিরোনাম ব্যবহার করতে পারেন, বা আপনার নিরাপত্তা দল দ্বারা অনুমোদিত অন্যান্য নিরাপত্তা ব্যবস্থা।

প্রমাণীকরণ প্রতিক্রিয়াগুলিতে আইডি টোকেনগুলি যাচাই করতে, আপনাকে আপনার প্ল্যাটফর্মের জন্য একটি Google API ক্লায়েন্ট লাইব্রেরি বা সাধারণ-উদ্দেশ্য JWT লাইব্রেরি ব্যবহার করার জন্য দৃঢ়ভাবে সুপারিশ করা হচ্ছে।

প্রায়শই জিজ্ঞাসিত প্রশ্ন (FAQ)

  • ওয়েবভিউতে কি ওয়ান ট্যাপ অ্যান্ড সাইন ইন Google বোতাম উপলব্ধ?

    না। নিরাপত্তা সংক্রান্ত উদ্বেগের কারণে, ব্যবহারকারীদের ওয়েবভিউতে Google সেশন যোগ করা উচিত নয়। এইভাবে, ওয়েবভিউতে GIS অক্ষম করা হয়েছে, যেহেতু সেখানে কোনো Google সেশন থাকার কথা নয়।

  • আমি কি Google বোতাম দিয়ে আমার নিজের সাইন ইন ব্যবহার করতে পারি? না। OAuth সার্ভার সাইড ফ্লো বা Google সাইন ইন জাভাস্ক্রিপ্ট লাইব্রেরির পূর্ববর্তী সংস্করণের সাথে, নির্ভরকারী পক্ষগুলি তাদের নিজস্ব সংস্করণ Google সাইন ইন বোতাম তৈরি করতে সাইন-ইন ব্র্যান্ডিং নির্দেশিকা ব্যবহার করতে সক্ষম হয়েছিল৷

    যাইহোক, Google এর সাথে সাইন ইন এই বৈশিষ্ট্যটি সরিয়ে দিয়েছে। Google আইডেন্টিটি সার্ভিসেস জাভাস্ক্রিপ্ট লাইব্রেরি দ্বারা সমস্ত সাইন ইন Google বোতামগুলি অবশ্যই তৈরি করতে হবে৷ এই পরিবর্তনের দুটি কারণ রয়েছে।

    • কিছু নির্ভরশীল পক্ষ নির্দেশিকা অনুসরণ করতে ব্যর্থ হয়েছে, যা ওয়েবসাইট জুড়ে Google বোতামগুলির সাথে অসঙ্গত সাইন ইনের দিকে পরিচালিত করে৷
    • লাইব্রেরি দ্বারা তৈরি করে, সাইন-ইন ব্র্যান্ডিং নির্দেশিকা নিজেই পরিবর্তিত হলে আপনাকে কোনো পরিবর্তন করতে হবে না।

    এই নিয়ম প্রয়োগ করতে, জাভাস্ক্রিপ্ট লাইব্রেরি শুধুমাত্র একটি এপিআই প্রকাশ করে একটি বোতাম রেন্ডার করার জন্য, কিন্তু সাইন ইন ফ্লো শুরু করার জন্য এপিআই নয়।

  • যদি আমার ওয়েবসাইট শুধুমাত্র ওয়ান ট্যাপ সক্ষম করে কিন্তু Google বোতাম দিয়ে সাইন ইন না করে তাহলে কী হবে?

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

    যদি আপনার ওয়েবসাইট শুধুমাত্র ওয়ান ট্যাপ সক্ষম করে কিন্তু Google বোতাম দিয়ে সাইন ইন না করে, তাহলে আপনি আপনার ওয়ান ট্যাপ প্রবাহের কর্মক্ষমতা হ্রাস দেখতে পাবেন, যেহেতু সূচকীয় কুল-ডাউন স্ট্যাটাস সময়মতো সাফ করা হয় না।

  • যখন আমার HTML API কোড পার্স করা হয়? আমি কি পরে আমার HTML API কোড পরিবর্তন করতে পারি?

    Google Identity Services JavaScript লাইব্রেরি জাভাস্ক্রিপ্ট লাইব্রেরি লোড ইভেন্ট বা DomContentLoaded ইভেন্টে, যেটি পরে হোক আপনার HTML API কোড পার্স করে এবং এক্সিকিউট করে।

    • জাভাস্ক্রিপ্ট লাইব্রেরি লোড হওয়ার সময় DomContentLoaded ইভেন্টটি ট্রিগার হলে, আপনার HTML API কোড পার্স করা হয় এবং অবিলম্বে কার্যকর করা হয়।
    • অন্যথায়, জাভাস্ক্রিপ্ট লাইব্রেরি DomContentLoaded ইভেন্টের জন্য একজন শ্রোতা যোগ করে। ট্রিগার করা হলে, শ্রোতা আপনার HTML API কোড পার্স করে এবং এক্সিকিউট করে।

    এছাড়াও মনে রাখবেন যে আপনার HTML API কোডের পার্সিং এবং এক্সিকিউশন এক বন্ধ

    • পার্সিং এবং এক্সিকিউশনের পরে, আপনার HTML API কোডের পরবর্তী পরিবর্তন উপেক্ষা করা হয়।
    • পার্সিং বা এক্সিকিউশন প্রক্রিয়া ট্রিগার করার জন্য ডেভেলপারদের জন্য কোন API নেই।