ক্লায়েন্ট-সাইড ওয়েব অ্যাপ্লিকেশনের জন্য OAuth 2.0

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

এই OAuth 2.0 ফ্লোকে বলা হয় অন্তর্নিহিত অনুদান প্রবাহ । এটি এমন অ্যাপ্লিকেশানগুলির জন্য ডিজাইন করা হয়েছে যেগুলি শুধুমাত্র এপিআই অ্যাক্সেস করতে পারে যখন ব্যবহারকারী অ্যাপ্লিকেশনটিতে উপস্থিত থাকে৷ এই অ্যাপ্লিকেশনগুলি গোপনীয় তথ্য সংরক্ষণ করতে সক্ষম নয়।

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

পূর্বশর্ত

আপনার প্রকল্পের জন্য API সক্ষম করুন

Google API-কে কল করে এমন যেকোনো অ্যাপ্লিকেশনকে সেই APIগুলিকে API Consoleএ সক্ষম করতে হবে।

আপনার প্রকল্পের জন্য একটি API সক্ষম করতে:

  1. Open the API Library Google API Consoleএ।
  2. If prompted, select a project, or create a new one.
  3. API Library পণ্য পরিবার এবং জনপ্রিয়তা দ্বারা গোষ্ঠীবদ্ধ সমস্ত উপলব্ধ API তালিকাভুক্ত করে। আপনি যে APIটি সক্ষম করতে চান তা তালিকায় দৃশ্যমান না হলে, এটি খুঁজতে অনুসন্ধান ব্যবহার করুন বা এটি যে পণ্যের পরিবারে রয়েছে তার সমস্ত দেখুন ক্লিক করুন৷
  4. আপনি যে APIটি সক্ষম করতে চান তা নির্বাচন করুন, তারপর সক্ষম বোতামটি ক্লিক করুন।
  5. If prompted, enable billing.
  6. If prompted, read and accept the API's Terms of Service.

অনুমোদনের শংসাপত্র তৈরি করুন

Google APIগুলি অ্যাক্সেস করতে OAuth 2.0 ব্যবহার করে এমন যেকোনো অ্যাপ্লিকেশনের অনুমোদনের শংসাপত্র থাকতে হবে যা Google-এর OAuth 2.0 সার্ভারে অ্যাপ্লিকেশনটিকে সনাক্ত করে৷ নিম্নলিখিত ধাপগুলি ব্যাখ্যা করে কিভাবে আপনার প্রকল্পের জন্য শংসাপত্র তৈরি করতে হয়। আপনার অ্যাপ্লিকেশনগুলি তারপরে সেই প্রকল্পের জন্য সক্ষম করা APIগুলি অ্যাক্সেস করতে শংসাপত্রগুলি ব্যবহার করতে পারে৷

  1. Go to the Credentials page.
  2. ক্রেডেনশিয়াল তৈরি করুন > OAuth ক্লায়েন্ট আইডি ক্লিক করুন।
  3. ওয়েব অ্যাপ্লিকেশন অ্যাপ্লিকেশন প্রকার নির্বাচন করুন.
  4. ফর্ম পূরণ শেষ করুন. অনুমোদিত Google API অনুরোধগুলি করতে জাভাস্ক্রিপ্ট ব্যবহার করে এমন অ্যাপ্লিকেশনগুলিকে অবশ্যই অনুমোদিত জাভাস্ক্রিপ্ট উত্স নির্দিষ্ট করতে হবে৷ উত্সগুলি সেই ডোমেনগুলিকে সনাক্ত করে যেগুলি থেকে আপনার অ্যাপ্লিকেশনটি OAuth 2.0 সার্ভারে অনুরোধ পাঠাতে পারে৷ এই উত্সগুলিকে অবশ্যই Google এর বৈধতা নিয়ম মেনে চলতে হবে৷

অ্যাক্সেস স্কোপ সনাক্ত করুন

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

আপনি OAuth 2.0 অনুমোদন কার্যকর করা শুরু করার আগে, আমরা সুপারিশ করি যে আপনি সেই সুযোগগুলি চিহ্নিত করুন যেগুলি অ্যাক্সেস করার জন্য আপনার অ্যাপের অনুমতির প্রয়োজন হবে।

OAuth 2.0 API স্কোপ নথিতে স্কোপের একটি সম্পূর্ণ তালিকা রয়েছে যা আপনি Google API অ্যাক্সেস করতে ব্যবহার করতে পারেন।

OAuth 2.0 অ্যাক্সেস টোকেন প্রাপ্ত করা

নিম্নলিখিত পদক্ষেপগুলি দেখায় যে কীভাবে আপনার অ্যাপ্লিকেশনটি Google-এর OAuth 2.0 সার্ভারের সাথে ইন্টারঅ্যাক্ট করে ব্যবহারকারীর পক্ষে একটি API অনুরোধ সম্পাদন করার জন্য ব্যবহারকারীর সম্মতি পেতে৷ ব্যবহারকারীর অনুমোদনের প্রয়োজন এমন একটি Google API অনুরোধ কার্যকর করার আগে আপনার আবেদনের সেই সম্মতি থাকতে হবে।

ধাপ 1: ক্লায়েন্ট অবজেক্ট কনফিগার করুন

আপনি যদি OAuth 2.0 ফ্লো পরিচালনা করতে JavaScript-এর জন্য Google APIs ক্লায়েন্ট লাইব্রেরি ব্যবহার করেন, তাহলে আপনার প্রথম ধাপ হল gapi.auth2 এবং gapi.client অবজেক্ট কনফিগার করা। এই বস্তুগুলি আপনার অ্যাপ্লিকেশনকে ব্যবহারকারীর অনুমোদন পেতে এবং অনুমোদিত API অনুরোধগুলি করতে সক্ষম করে৷

ক্লায়েন্ট অবজেক্ট সেই স্কোপগুলি সনাক্ত করে যা আপনার অ্যাপ্লিকেশন অ্যাক্সেসের অনুমতির জন্য অনুরোধ করছে। এই মানগুলি সম্মতি স্ক্রীনকে জানায় যা Google ব্যবহারকারীকে প্রদর্শন করে।

জেএস ক্লায়েন্ট লাইব্রেরি

জাভাস্ক্রিপ্ট ক্লায়েন্ট লাইব্রেরি অনুমোদন প্রক্রিয়ার অসংখ্য দিককে সরল করে:

  1. এটি Google এর অনুমোদন সার্ভারের জন্য পুনঃনির্দেশ URL তৈরি করে এবং ব্যবহারকারীকে সেই URL-এ নির্দেশিত করার একটি পদ্ধতি প্রদান করে।
  2. এটি সেই সার্ভার থেকে আপনার অ্যাপ্লিকেশনে পুনঃনির্দেশ পরিচালনা করে।
  3. এটি অনুমোদন সার্ভার দ্বারা ফেরত অ্যাক্সেস টোকেন যাচাই করে।
  4. এটি অ্যাক্সেস টোকেন সংরক্ষণ করে যা অনুমোদন সার্ভার আপনার অ্যাপ্লিকেশনে পাঠায় এবং যখন আপনার অ্যাপ পরবর্তীতে অনুমোদিত API কল করে তখন এটি পুনরুদ্ধার করে।

নীচের কোড স্নিপেটটি এই নথিতে পরে দেখানো সম্পূর্ণ উদাহরণ থেকে একটি উদ্ধৃতি। এই কোডটি gapi.client অবজেক্টকে আরম্ভ করে, যা আপনার অ্যাপ্লিকেশন পরে API কল করতে ব্যবহার করবে। যখন সেই বস্তুটি তৈরি হয়, gapi.auth2 অবজেক্ট, যা আপনার অ্যাপ্লিকেশন ব্যবহারকারীর অনুমোদনের স্থিতি পরীক্ষা এবং নিরীক্ষণ করতে ব্যবহার করে, সেটিও আরম্ভ করা হয়।

gapi.client.init এ কল নিম্নলিখিত ক্ষেত্রগুলি নির্দিষ্ট করে:

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

    আমরা সুপারিশ করি যে যখনই সম্ভব প্রেক্ষাপটে অনুমোদনের সুযোগে অ্যাক্সেসের জন্য আপনার আবেদন অনুরোধ। প্রেক্ষাপটে ব্যবহারকারীর ডেটাতে অ্যাক্সেসের অনুরোধ করে, ক্রমবর্ধমান অনুমোদনের মাধ্যমে, আপনি ব্যবহারকারীদের আরও সহজে বুঝতে সাহায্য করেন কেন আপনার অ্যাপ্লিকেশানটি যে অ্যাক্সেসের অনুরোধ করছে সেটির প্রয়োজন।

  • DiscoveryDocs ক্ষেত্রটি API আবিষ্কারের নথিগুলির discoveryDocs তালিকা চিহ্নিত করে যা আপনার অ্যাপ্লিকেশন ব্যবহার করে। একটি ডিসকভারি ডকুমেন্ট একটি এপিআই এর সারফেস বর্ণনা করে, এর রিসোর্স স্কিমা সহ, এবং জাভাস্ক্রিপ্ট ক্লায়েন্ট লাইব্রেরি সেই তথ্য ব্যবহার করে অ্যাপ্লিকেশনগুলি ব্যবহার করতে পারে এমন পদ্ধতি তৈরি করতে। এই উদাহরণে, কোডটি Google Drive API-এর সংস্করণ 3-এর জন্য আবিষ্কারের নথি পুনরুদ্ধার করে।

gapi.client.init কল সম্পূর্ণ হওয়ার পরে, কোডটি Google Auth অবজেক্ট সনাক্ত করতে GoogleAuth ভেরিয়েবল সেট করে। অবশেষে, কোডটি একটি শ্রোতা সেট করে যেটি একটি ফাংশন কল করে যখন ব্যবহারকারীর সাইন-ইন অবস্থা পরিবর্তন হয়। (সেই ফাংশনটি স্নিপেটে সংজ্ঞায়িত করা হয়নি।)

var GoogleAuth; // Google Auth object.
function initClient() {
  gapi.client.init({
      'apiKey': 'YOUR_API_KEY',
      'clientId': 'YOUR_CLIENT_ID',
      'scope': 'https://www.googleapis.com/auth/drive.metadata.readonly',
      'discoveryDocs': ['https://www.googleapis.com/discovery/v1/apis/drive/v3/rest']
  }).then(function () {
      GoogleAuth = gapi.auth2.getAuthInstance();

      // Listen for sign-in state changes.
      GoogleAuth.isSignedIn.listen(updateSigninStatus);
  });
}

OAuth 2.0 এন্ডপয়েন্ট

আপনি যদি সরাসরি OAuth 2.0 এন্ডপয়েন্ট অ্যাক্সেস করেন, তাহলে আপনি পরবর্তী ধাপে যেতে পারেন।

ধাপ 2: Google এর OAuth 2.0 সার্ভারে পুনঃনির্দেশ করুন

ব্যবহারকারীর ডেটা অ্যাক্সেস করার অনুমতির অনুরোধ করতে, ব্যবহারকারীকে Google এর OAuth 2.0 সার্ভারে পুনঃনির্দেশ করুন৷

জেএস ক্লায়েন্ট লাইব্রেরি

ব্যবহারকারীকে Google-এর অনুমোদন সার্ভারে নিয়ে যেতে GoogleAuth.signIn() পদ্ধতিতে কল করুন৷

GoogleAuth.signIn();

অনুশীলনে, একটি API কল করার চেষ্টা করার আগে signIn() পদ্ধতিতে কল করতে হবে কিনা তা নির্ধারণ করতে আপনার অ্যাপ্লিকেশনটি একটি বুলিয়ান মান সেট করতে পারে।

নীচের কোড স্নিপেটটি প্রদর্শন করে যে আপনি কীভাবে ব্যবহারকারীর অনুমোদনের প্রবাহ শুরু করবেন। স্নিপেট সম্পর্কে নিম্নলিখিত পয়েন্ট নোট করুন:

  • কোডে উল্লেখ করা GoogleAuth অবজেক্টটি ধাপ 1 -এ কোড স্নিপেটে সংজ্ঞায়িত গ্লোবাল ভেরিয়েবলের মতোই।

  • updateSigninStatus ফাংশন হল একজন শ্রোতা যা ব্যবহারকারীর অনুমোদনের স্থিতিতে পরিবর্তনের জন্য শোনে। শ্রোতা হিসেবে এর ভূমিকাটি ধাপ 1:
    GoogleAuth.isSignedIn.listen(updateSigninStatus);
    এর কোড স্নিপেটেও সংজ্ঞায়িত করা হয়েছে
  • স্নিপেট দুটি অতিরিক্ত গ্লোবাল ভেরিয়েবল সংজ্ঞায়িত করে:

    • isAuthorized হল একটি বুলিয়ান ভেরিয়েবল যা নির্দেশ করে যে ব্যবহারকারী ইতিমধ্যে সাইন ইন করেছেন কিনা৷ এই মানটি সেট করা যেতে পারে যখন অ্যাপ লোড হয় এবং ব্যবহারকারী অ্যাপ থেকে সাইন ইন বা আউট করলে আপডেট হয়৷

      এই স্নিপেটে, sendAuthorizedApiRequest ফাংশন ভেরিয়েবলের মান পরীক্ষা করে যে অ্যাপটি এমন একটি API অনুরোধের চেষ্টা করবে কিনা যার জন্য অনুমোদনের প্রয়োজন হয় বা ব্যবহারকারীকে অ্যাপটিকে অনুমোদন করার জন্য অনুরোধ জানানো হয়।

    • currentApiRequest হল এমন একটি বস্তু যা ব্যবহারকারীর চেষ্টা করা শেষ API অনুরোধের বিবরণ সঞ্চয় করে। অ্যাপটি sendAuthorizedApiRequest ফাংশন কল করলে অবজেক্টের মান সেট করা হয়।

      যদি ব্যবহারকারী অ্যাপটিকে অনুমোদন করে থাকে, তাহলে অনুরোধটি অবিলম্বে কার্যকর করা হয়। অন্যথায়, ফাংশনটি ব্যবহারকারীকে সাইন ইন করার জন্য পুনঃনির্দেশ করে। ব্যবহারকারী সাইন ইন করার পরে, updateSignInStatus ফাংশন sendAuthorizedApiRequest কল করে, অনুমোদনের প্রবাহ শুরু হওয়ার আগে যে অনুরোধটি করা হয়েছিল সেটি পাস করে।

var isAuthorized;
var currentApiRequest;

/**
 * Store the request details. Then check to determine whether the user
 * has authorized the application.
 *   - If the user has granted access, make the API request.
 *   - If the user has not granted access, initiate the sign-in flow.
 */
function sendAuthorizedApiRequest(requestDetails) {
  currentApiRequest = requestDetails;
  if (isAuthorized) {
    // Make API request
    // gapi.client.request(requestDetails)

    // Reset currentApiRequest variable.
    currentApiRequest = {};
  } else {
    GoogleAuth.signIn();
  }
}

/**
 * Listener called when user completes auth flow. If the currentApiRequest
 * variable is set, then the user was prompted to authorize the application
 * before the request executed. In that case, proceed with that API request.
 */
function updateSigninStatus(isSignedIn) {
  if (isSignedIn) {
    isAuthorized = true;
    if (currentApiRequest) {
      sendAuthorizedApiRequest(currentApiRequest);
    }
  } else {
    isAuthorized = false;
  }
}

OAuth 2.0 এন্ডপয়েন্ট

https://accounts.google.com/o/oauth2/v2/auth এ Google-এর OAuth 2.0 এন্ডপয়েন্ট থেকে অ্যাক্সেসের অনুরোধ করার জন্য একটি URL তৈরি করুন। এই শেষ বিন্দু HTTPS এর মাধ্যমে অ্যাক্সেসযোগ্য; সরল HTTP সংযোগ প্রত্যাখ্যান করা হয়.

Google অনুমোদন সার্ভার ওয়েব সার্ভার অ্যাপ্লিকেশনের জন্য নিম্নলিখিত ক্যোয়ারী স্ট্রিং পরামিতি সমর্থন করে:

পরামিতি
client_id প্রয়োজন

আপনার আবেদনের জন্য ক্লায়েন্ট আইডি। আপনি API ConsoleCredentials pageএ এই মানটি খুঁজে পেতে পারেন।

redirect_uri প্রয়োজন

ব্যবহারকারী অনুমোদন প্রবাহ সম্পূর্ণ করার পরে API সার্ভার ব্যবহারকারীকে কোথায় পুনঃনির্দেশ করে তা নির্ধারণ করে। মানটি অবশ্যই OAuth 2.0 ক্লায়েন্টের জন্য অনুমোদিত রিডাইরেক্ট ইউআরআইগুলির একটির সাথে মেলে, যা আপনি আপনার ক্লায়েন্টের API ConsoleCredentials pageএ কনফিগার করেছেন। যদি এই মানটি প্রদত্ত client_id জন্য একটি অনুমোদিত পুনঃনির্দেশ URI-এর সাথে মেলে না তাহলে আপনি একটি redirect_uri_mismatch ত্রুটি পাবেন।

মনে রাখবেন যে http বা https স্কিম, কেস, এবং ট্রেইলিং স্ল্যাশ (' / ') অবশ্যই মিলবে।

response_type প্রয়োজন

জাভাস্ক্রিপ্ট অ্যাপ্লিকেশনগুলিকে প্যারামিটারের মান token সেট করতে হবে। এই মানটি Google অনুমোদন সার্ভারকে URI ( # ) এর ফ্র্যাগমেন্ট আইডেন্টিফায়ারে একটি name=value pair হিসেবে অ্যাক্সেস টোকেন ফেরত দিতে নির্দেশ দেয় যেখানে ব্যবহারকারীকে অনুমোদন প্রক্রিয়া সম্পূর্ণ করার পরে পুনঃনির্দেশিত করা হয়।

scope প্রয়োজন

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

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

আমরা সুপারিশ করি যে যখনই সম্ভব প্রেক্ষাপটে অনুমোদনের সুযোগে অ্যাক্সেসের জন্য আপনার আবেদন অনুরোধ। প্রেক্ষাপটে ব্যবহারকারীর ডেটাতে অ্যাক্সেসের অনুরোধ করে, ক্রমবর্ধমান অনুমোদনের মাধ্যমে, আপনি ব্যবহারকারীদের আরও সহজে বুঝতে সাহায্য করেন কেন আপনার অ্যাপ্লিকেশানটি যে অ্যাক্সেসের অনুরোধ করছে সেটির প্রয়োজন।

state প্রস্তাবিত

আপনার অনুমোদনের অনুরোধ এবং অনুমোদন সার্ভারের প্রতিক্রিয়ার মধ্যে অবস্থা বজায় রাখতে আপনার অ্যাপ্লিকেশন ব্যবহার করে এমন কোনো স্ট্রিং মান নির্দিষ্ট করে। ব্যবহারকারী আপনার অ্যাপ্লিকেশনের অ্যাক্সেস অনুরোধে সম্মতি বা অস্বীকার করার পরে সার্ভারটি redirect_uri uri-এর URL ফ্র্যাগমেন্ট আইডেন্টিফায়ার ( # ) এ name=value pair হিসাবে আপনি যে মানটি পাঠান তা ফেরত দেয়।

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

include_granted_scopes ঐচ্ছিক

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

login_hint ঐচ্ছিক

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

প্যারামিটার মানটিকে একটি ইমেল ঠিকানা বা sub শনাক্তকারীতে সেট করুন, যা ব্যবহারকারীর Google আইডির সমতুল্য।

prompt ঐচ্ছিক

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

সম্ভাব্য মান হল:

none কোনো প্রমাণীকরণ বা সম্মতি স্ক্রীন প্রদর্শন করবেন না। অন্যান্য মানের সাথে নির্দিষ্ট করা উচিত নয়।
consent ব্যবহারকারীকে সম্মতির জন্য অনুরোধ করুন।
select_account ব্যবহারকারীকে একটি অ্যাকাউন্ট নির্বাচন করতে অনুরোধ করুন।

Google এর অনুমোদন সার্ভারে নমুনা পুনঃনির্দেশ

পঠনযোগ্যতার জন্য লাইন বিরতি এবং স্পেস সহ একটি উদাহরণ URL নীচে দেখানো হয়েছে।

https://accounts.google.com/o/oauth2/v2/auth?
 scope=https%3A//www.googleapis.com/auth/drive.metadata.readonly&
 include_granted_scopes=true&
 response_type=token&
 state=state_parameter_passthrough_value&
 redirect_uri=https%3A//oauth2.example.com/code&
 client_id=client_id

আপনি অনুরোধ URL তৈরি করার পরে, ব্যবহারকারীকে এটিতে পুনঃনির্দেশ করুন।

জাভাস্ক্রিপ্ট নমুনা কোড

নিম্নলিখিত জাভাস্ক্রিপ্ট স্নিপেট দেখায় কিভাবে জাভাস্ক্রিপ্টের জন্য Google API ক্লায়েন্ট লাইব্রেরি ব্যবহার না করে জাভাস্ক্রিপ্টে অনুমোদনের প্রবাহ শুরু করতে হয়। যেহেতু এই OAuth 2.0 এন্ডপয়েন্ট ক্রস-অরিজিন রিসোর্স শেয়ারিং (CORS) সমর্থন করে না, তাই স্নিপেট একটি ফর্ম তৈরি করে যা সেই শেষ পয়েন্টে অনুরোধটি খোলে।

/*
 * Create form to request access token from Google's OAuth 2.0 server.
 */
function oauthSignIn() {
  // Google's OAuth 2.0 endpoint for requesting an access token
  var oauth2Endpoint = 'https://accounts.google.com/o/oauth2/v2/auth';

  // Create <form> element to submit parameters to OAuth 2.0 endpoint.
  var form = document.createElement('form');
  form.setAttribute('method', 'GET'); // Send as a GET request.
  form.setAttribute('action', oauth2Endpoint);

  // Parameters to pass to OAuth 2.0 endpoint.
  var params = {'client_id': 'YOUR_CLIENT_ID',
                'redirect_uri': 'YOUR_REDIRECT_URI',
                'response_type': 'token',
                'scope': 'https://www.googleapis.com/auth/drive.metadata.readonly',
                'include_granted_scopes': 'true',
                'state': 'pass-through value'};

  // Add form parameters as hidden input values.
  for (var p in params) {
    var input = document.createElement('input');
    input.setAttribute('type', 'hidden');
    input.setAttribute('name', p);
    input.setAttribute('value', params[p]);
    form.appendChild(input);
  }

  // Add form to page and submit it to open the OAuth 2.0 endpoint.
  document.body.appendChild(form);
  form.submit();
}

ধাপ 3: Google ব্যবহারকারীকে সম্মতির জন্য অনুরোধ করে

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

আপনার অ্যাপ্লিকেশনটির এই পর্যায়ে কিছু করার দরকার নেই কারণ এটি Google-এর OAuth 2.0 সার্ভারের প্রতিক্রিয়ার জন্য অপেক্ষা করে যা নির্দেশ করে যে কোনো অ্যাক্সেস দেওয়া হয়েছে কিনা। যে প্রতিক্রিয়া নিম্নলিখিত ধাপে ব্যাখ্যা করা হয়েছে.

ত্রুটি

Google এর OAuth 2.0 অনুমোদনের এন্ডপয়েন্টে অনুরোধ প্রত্যাশিত প্রমাণীকরণ এবং অনুমোদনের প্রবাহের পরিবর্তে ব্যবহারকারী-মুখী ত্রুটি বার্তাগুলি প্রদর্শন করতে পারে। সাধারণ ত্রুটি কোড এবং প্রস্তাবিত রেজোলিউশন নীচে তালিকাভুক্ত করা হয়.

admin_policy_enforced

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

disallowed_useragent

অনুমোদনের এন্ডপয়েন্টটি Google-এর OAuth 2.0 নীতি দ্বারা অনুমোদিত একটি এমবেডেড ব্যবহারকারী-এজেন্টের ভিতরে প্রদর্শিত হয়৷

অ্যান্ড্রয়েড

android.webkit.WebView এ অনুমোদনের অনুরোধগুলি খোলার সময় Android বিকাশকারীরা এই ত্রুটির বার্তাটির সম্মুখীন হতে পারে৷ বিকাশকারীদের পরিবর্তে Android লাইব্রেরিগুলি ব্যবহার করা উচিত যেমন Android এর জন্য Google সাইন-ইন বা Android এর জন্য OpenID ফাউন্ডেশনের AppAuth

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

iOS

WKWebView এ অনুমোদনের অনুরোধ খোলার সময় iOS এবং macOS ডেভেলপাররা এই ত্রুটির সম্মুখীন হতে পারে। বিকাশকারীদের পরিবর্তে iOS লাইব্রেরিগুলি ব্যবহার করা উচিত যেমন iOS এর জন্য Google সাইন-ইন বা iOS এর জন্য OpenID ফাউন্ডেশনের AppAuth

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

org_internal

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

origin_mismatch

অনুমোদনের অনুরোধের উদ্ভব জাভাস্ক্রিপ্টের স্কিম, ডোমেন এবং/অথবা পোর্ট OAuth ক্লায়েন্ট আইডির জন্য নিবন্ধিত একটি অনুমোদিত জাভাস্ক্রিপ্ট অরিজিন ইউআরআই-এর সাথে নাও মিলতে পারে। Google API ConsoleCredentials pageএ অনুমোদিত জাভাস্ক্রিপ্টের উৎস পর্যালোচনা করুন।

redirect_uri_mismatch

অনুমোদনের অনুরোধে পাস করা redirect_uri OAuth ক্লায়েন্ট আইডির জন্য অনুমোদিত রিডাইরেক্ট URI-এর সাথে মেলে না। Google API Console Credentials pageএ অনুমোদিত রিডাইরেক্ট ইউআরআইগুলি পর্যালোচনা করুন।

অনুমোদনের অনুরোধের উদ্ভব জাভাস্ক্রিপ্টের স্কিম, ডোমেন এবং/অথবা পোর্ট OAuth ক্লায়েন্ট আইডির জন্য নিবন্ধিত একটি অনুমোদিত জাভাস্ক্রিপ্ট অরিজিন ইউআরআই-এর সাথে নাও মিলতে পারে। Google API Console Credentials pageএ অনুমোদিত জাভাস্ক্রিপ্টের উৎস পর্যালোচনা করুন।

ধাপ 4: OAuth 2.0 সার্ভার প্রতিক্রিয়া পরিচালনা করুন

জেএস ক্লায়েন্ট লাইব্রেরি

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

OAuth 2.0 এন্ডপয়েন্ট

OAuth 2.0 সার্ভার আপনার অ্যাক্সেস টোকেন অনুরোধে উল্লেখিত redirect_uri এ একটি প্রতিক্রিয়া পাঠায়।

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

  • একটি অ্যাক্সেস টোকেন প্রতিক্রিয়া:

    https://oauth2.example.com/callback#access_token=4/P7q7W91&token_type=Bearer&expires_in=3600

    অ্যাক্সেস_টোকেন প্যারামিটার ছাড়াও, টুকরো স্ট্রিংটিতে access_token প্যারামিটার রয়েছে, যা সর্বদা Bearer এ সেট করা expires_in token_type , যা টোকেনের জীবনকাল নির্দিষ্ট করে, সেকেন্ডে। যদি state প্যারামিটারটি অ্যাক্সেস টোকেন অনুরোধে নির্দিষ্ট করা হয়, তবে এর মানও প্রতিক্রিয়াতে অন্তর্ভুক্ত করা হয়।

  • একটি ত্রুটি প্রতিক্রিয়া:
    https://oauth2.example.com/callback#error=access_denied

নমুনা OAuth 2.0 সার্ভার প্রতিক্রিয়া

আপনি নিম্নলিখিত নমুনা URL-এ ক্লিক করে এই প্রবাহটি পরীক্ষা করতে পারেন, যা আপনার Google ড্রাইভে ফাইলগুলির মেটাডেটা দেখার জন্য শুধুমাত্র-পঠন অ্যাক্সেসের অনুরোধ করে:

https://accounts.google.com/o/oauth2/v2/auth?
 scope=https%3A//www.googleapis.com/auth/drive.metadata.readonly&
 include_granted_scopes=true&
 response_type=token&
 state=state_parameter_passthrough_value&
 redirect_uri=https%3A//oauth2.example.com/code&
 client_id=client_id

OAuth 2.0 ফ্লো সম্পূর্ণ করার পরে, আপনাকে http://localhost/oauth2callback এ পুনঃনির্দেশিত করা হবে। সেই URLটি একটি 404 NOT FOUND ত্রুটি প্রদান করবে যদি না আপনার স্থানীয় মেশিনটি সেই ঠিকানায় একটি ফাইল পরিবেশন করে। পরবর্তী ধাপটি ইউআরআই-এ ফেরত দেওয়া তথ্য সম্পর্কে আরও বিশদ প্রদান করে যখন ব্যবহারকারীকে আপনার অ্যাপ্লিকেশনে ফেরত পাঠানো হয়।

Google API কল করা হচ্ছে

জেএস ক্লায়েন্ট লাইব্রেরি

আপনার অ্যাপ্লিকেশন একটি অ্যাক্সেস টোকেন পাওয়ার পরে, আপনি ব্যবহারকারীর পক্ষে API অনুরোধ করতে JavaScript ক্লায়েন্ট লাইব্রেরি ব্যবহার করতে পারেন। ক্লায়েন্ট লাইব্রেরি আপনার জন্য অ্যাক্সেস টোকেন পরিচালনা করে এবং অনুরোধে এটি পাঠাতে আপনাকে বিশেষ কিছু করতে হবে না।

ক্লায়েন্ট লাইব্রেরি API পদ্ধতি কল করার দুটি উপায় সমর্থন করে। আপনি যদি একটি আবিষ্কার নথি লোড করে থাকেন, তাহলে API আপনার জন্য পদ্ধতি-নির্দিষ্ট ফাংশন সংজ্ঞায়িত করবে। আপনি একটি API পদ্ধতি কল করার জন্য gapi.client.request ফাংশন ব্যবহার করতে পারেন। নিম্নলিখিত দুটি স্নিপেট ড্রাইভ API এর about.get পদ্ধতির জন্য এই বিকল্পগুলি প্রদর্শন করে৷

// Example 1: Use method-specific function
var request = gapi.client.drive.about.get({'fields': 'user'});

// Execute the API request.
request.execute(function(response) {
  console.log(response);
});


// Example 2: Use gapi.client.request(args) function
var request = gapi.client.request({
  'method': 'GET',
  'path': '/drive/v3/about',
  'params': {'fields': 'user'}
});
// Execute the API request.
request.execute(function(response) {
  console.log(response);
});

OAuth 2.0 এন্ডপয়েন্ট

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

আপনি সমস্ত Google API ব্যবহার করে দেখতে পারেন এবং OAuth 2.0 খেলার মাঠে তাদের স্কোপ দেখতে পারেন।

HTTP GET উদাহরণ

অনুমোদন ব্যবহার করে drive.files এন্ডপয়েন্টে (ড্রাইভ ফাইল এপিআই) একটি কল Authorization: Bearer HTTP হেডার নিচের মত দেখতে হতে পারে। মনে রাখবেন যে আপনাকে আপনার নিজস্ব অ্যাক্সেস টোকেন নির্দিষ্ট করতে হবে:

GET /drive/v2/files HTTP/1.1
Host: www.googleapis.com
Authorization: Bearer access_token

এখানে access_token ক্যোয়ারী স্ট্রিং প্যারামিটার ব্যবহার করে প্রমাণীকৃত ব্যবহারকারীর জন্য একই API-তে একটি কল রয়েছে:

GET https://www.googleapis.com/drive/v2/files?access_token=access_token

curl উদাহরণ

আপনি curl কমান্ড-লাইন অ্যাপ্লিকেশনের মাধ্যমে এই কমান্ডগুলি পরীক্ষা করতে পারেন। এখানে একটি উদাহরণ যা HTTP হেডার বিকল্প ব্যবহার করে (পছন্দের):

curl -H "Authorization: Bearer access_token" https://www.googleapis.com/drive/v2/files

অথবা, বিকল্পভাবে, ক্যোয়ারী স্ট্রিং প্যারামিটার বিকল্প:

curl https://www.googleapis.com/drive/v2/files?access_token=access_token

জাভাস্ক্রিপ্ট নমুনা কোড

নীচের কোড স্নিপেটটি দেখায় যে কীভাবে একটি Google API-এ একটি অনুরোধ পাঠাতে CORS (ক্রস-অরিজিন রিসোর্স শেয়ারিং) ব্যবহার করতে হয়। এই উদাহরণটি জাভাস্ক্রিপ্টের জন্য Google APIs ক্লায়েন্ট লাইব্রেরি ব্যবহার করে না। যাইহোক, আপনি ক্লায়েন্ট লাইব্রেরি ব্যবহার না করলেও, সেই লাইব্রেরির ডকুমেন্টেশনে CORS সাপোর্ট গাইড আপনাকে এই অনুরোধগুলি আরও ভালভাবে বুঝতে সাহায্য করবে।

এই কোড স্নিপেটে, অ্যাক্সেস_টোকেন ভেরিয়েবলটি সেই access_token উপস্থাপন করে যা আপনি অনুমোদিত ব্যবহারকারীর পক্ষ থেকে API অনুরোধ করার জন্য পেয়েছেন। সম্পূর্ণ উদাহরণ দেখায় কিভাবে ব্রাউজারের স্থানীয় স্টোরেজে সেই টোকেনটি সংরক্ষণ করা যায় এবং একটি API অনুরোধ করার সময় এটি পুনরুদ্ধার করা যায়।

var xhr = new XMLHttpRequest();
xhr.open('GET',
    'https://www.googleapis.com/drive/v3/about?fields=user&' +
    'access_token=' + params['access_token']);
xhr.onreadystatechange = function (e) {
  console.log(xhr.response);
};
xhr.send(null);

সম্পূর্ণ উদাহরণ

জেএস ক্লায়েন্ট লাইব্রেরি

নমুনা কোড ডেমো

এই বিভাগে কোড নমুনার একটি কার্যকরী ডেমো রয়েছে যা একটি প্রকৃত অ্যাপে কোডটি কীভাবে আচরণ করে তা প্রদর্শন করতে অনুসরণ করে। আপনি অ্যাপটিকে অনুমোদন করার পরে, এটি আপনার Google অ্যাকাউন্টের সাথে সংযুক্ত অ্যাপগুলির মধ্যে তালিকাভুক্ত হবে। অ্যাপটির নাম OAuth 2.0 Demo for Google API ডক্স । একইভাবে, আপনি যদি অ্যাক্সেস প্রত্যাহার করেন এবং সেই পৃষ্ঠাটি রিফ্রেশ করেন, সেই অ্যাপটি আর তালিকাভুক্ত হবে না।

মনে রাখবেন এই অ্যাপটি https://www.googleapis.com/auth/drive.metadata.readonly স্কোপে অ্যাক্সেসের অনুরোধ করে। একটি JavaScript অ্যাপ্লিকেশনে OAuth 2.0 ফ্লো কীভাবে শুরু করতে হয় তা প্রদর্শন করার জন্য অ্যাক্সেসের অনুরোধ করা হয়েছে। এই অ্যাপটি কোনো API অনুরোধ করে না।

জাভাস্ক্রিপ্ট নমুনা কোড

উপরে দেখানো হিসাবে, এই কোড নমুনাটি এমন একটি পৃষ্ঠার (একটি অ্যাপ) যা JavaScript-এর জন্য Google APIs ক্লায়েন্ট লাইব্রেরি লোড করে এবং OAuth 2.0 ফ্লো শুরু করে। পৃষ্ঠাটি প্রদর্শন করে:

  • একটি বোতাম যা ব্যবহারকারীকে অ্যাপে সাইন ইন করতে দেয়। ব্যবহারকারী যদি আগে অ্যাপটিকে অনুমোদন না করে থাকেন, তাহলে অ্যাপটি OAuth 2.0 ফ্লো চালু করে।
  • দুটি বোতাম যা ব্যবহারকারীকে হয় অ্যাপ থেকে সাইন আউট করতে বা অ্যাপটিতে পূর্বে দেওয়া অ্যাক্সেস প্রত্যাহার করতে দেয়। আপনি যদি কোনো অ্যাপ থেকে সাইন আউট করেন, তাহলে আপনি অ্যাপটিতে দেওয়া অ্যাক্সেস প্রত্যাহার করেননি। অ্যাপটি আপনার পক্ষ থেকে অন্য অনুমোদিত অনুরোধগুলি করার আগে আপনাকে আবার সাইন ইন করতে হবে, কিন্তু পরের বার আপনি অ্যাপটি ব্যবহার করার সময় আপনাকে আর অ্যাক্সেস দিতে হবে না। যাইহোক, আপনি যদি অ্যাক্সেস প্রত্যাহার করেন, তাহলে আপনাকে আবার অ্যাক্সেস দিতে হবে।

এছাড়াও আপনি আপনার Google অ্যাকাউন্টের অনুমতি পৃষ্ঠার মাধ্যমে অ্যাপে অ্যাক্সেস প্রত্যাহার করতে পারেন। অ্যাপটিকে Google API ডক্সের জন্য OAuth 2.0 ডেমো হিসেবে তালিকাভুক্ত করা হয়েছে।

<script>
  var GoogleAuth;
  var SCOPE = 'https://www.googleapis.com/auth/drive.metadata.readonly';
  function handleClientLoad() {
    // Load the API's client and auth2 modules.
    // Call the initClient function after the modules load.
    gapi.load('client:auth2', initClient);
  }

  function initClient() {
    // In practice, your app can retrieve one or more discovery documents.
    var discoveryUrl = 'https://www.googleapis.com/discovery/v1/apis/drive/v3/rest';

    // Initialize the gapi.client object, which app uses to make API requests.
    // Get API key and client ID from API Console.
    // 'scope' field specifies space-delimited list of access scopes.
    gapi.client.init({
        'apiKey': 'YOUR_API_KEY',
        'clientId': 'YOUR_CLIENT_ID',
        'discoveryDocs': [discoveryUrl],
        'scope': SCOPE
    }).then(function () {
      GoogleAuth = gapi.auth2.getAuthInstance();

      // Listen for sign-in state changes.
      GoogleAuth.isSignedIn.listen(updateSigninStatus);

      // Handle initial sign-in state. (Determine if user is already signed in.)
      var user = GoogleAuth.currentUser.get();
      setSigninStatus();

      // Call handleAuthClick function when user clicks on
      //      "Sign In/Authorize" button.
      $('#sign-in-or-out-button').click(function() {
        handleAuthClick();
      });
      $('#revoke-access-button').click(function() {
        revokeAccess();
      });
    });
  }

  function handleAuthClick() {
    if (GoogleAuth.isSignedIn.get()) {
      // User is authorized and has clicked "Sign out" button.
      GoogleAuth.signOut();
    } else {
      // User is not signed in. Start Google auth flow.
      GoogleAuth.signIn();
    }
  }

  function revokeAccess() {
    GoogleAuth.disconnect();
  }

  function setSigninStatus() {
    var user = GoogleAuth.currentUser.get();
    var isAuthorized = user.hasGrantedScopes(SCOPE);
    if (isAuthorized) {
      $('#sign-in-or-out-button').html('Sign out');
      $('#revoke-access-button').css('display', 'inline-block');
      $('#auth-status').html('You are currently signed in and have granted ' +
          'access to this app.');
    } else {
      $('#sign-in-or-out-button').html('Sign In/Authorize');
      $('#revoke-access-button').css('display', 'none');
      $('#auth-status').html('You have not authorized this app or you are ' +
          'signed out.');
    }
  }

  function updateSigninStatus() {
    setSigninStatus();
  }
</script>

<button id="sign-in-or-out-button"
        style="margin-left: 25px">Sign In/Authorize</button>
<button id="revoke-access-button"
        style="display: none; margin-left: 25px">Revoke access</button>

<div id="auth-status" style="display: inline; padding-left: 25px"></div><hr>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script async defer src="https://apis.google.com/js/api.js"
        onload="this.onload=function(){};handleClientLoad()"
        onreadystatechange="if (this.readyState === 'complete') this.onload()">
</script>

OAuth 2.0 এন্ডপয়েন্ট

এই কোড নমুনাটি জাভাস্ক্রিপ্টের জন্য Google APIs ক্লায়েন্ট লাইব্রেরি ব্যবহার না করে কীভাবে জাভাস্ক্রিপ্টে OAuth 2.0 ফ্লো সম্পূর্ণ করতে হয় তা দেখায়। কোডটি একটি HTML পৃষ্ঠার জন্য যা একটি API অনুরোধ চেষ্টা করার জন্য একটি বোতাম প্রদর্শন করে। আপনি যদি বোতামটি ক্লিক করেন, কোডটি দেখতে পায় যে পৃষ্ঠাটি আপনার ব্রাউজারের স্থানীয় স্টোরেজে একটি API অ্যাক্সেস টোকেন সংরক্ষণ করেছে কিনা। যদি তাই হয়, এটি API অনুরোধটি কার্যকর করে। অন্যথায়, এটি OAuth 2.0 প্রবাহ শুরু করে।

OAuth 2.0 প্রবাহের জন্য, পৃষ্ঠাটি এই পদক্ষেপগুলি অনুসরণ করে:

  1. এটি ব্যবহারকারীকে Google-এর OAuth 2.0 সার্ভারে নির্দেশ করে, যা https://www.googleapis.com/auth/drive.metadata.readonly স্কোপে অ্যাক্সেসের অনুরোধ করে।
  2. এক বা একাধিক অনুরোধকৃত স্কোপে অ্যাক্সেস দেওয়ার (বা অস্বীকার) করার পরে, ব্যবহারকারীকে মূল পৃষ্ঠায় পুনঃনির্দেশিত করা হয়, যা খণ্ড শনাক্তকারী স্ট্রিং থেকে অ্যাক্সেস টোকেন পার্স করে।
  3. নমুনা API অনুরোধ করতে পৃষ্ঠাটি অ্যাক্সেস টোকেন ব্যবহার করে।

    API অনুরোধটি অনুমোদিত ব্যবহারকারীর Google ড্রাইভ অ্যাকাউন্ট সম্পর্কে তথ্য পুনরুদ্ধার করতে ড্রাইভ API-এর about.get পদ্ধতিতে কল করে৷

  4. অনুরোধটি সফলভাবে কার্যকর হলে, API প্রতিক্রিয়া ব্রাউজারের ডিবাগিং কনসোলে লগ ইন করা হয়।

আপনি আপনার Google অ্যাকাউন্টের অনুমতি পৃষ্ঠার মাধ্যমে অ্যাপে অ্যাক্সেস প্রত্যাহার করতে পারেন। অ্যাপটিকে Google API ডক্সের জন্য OAuth 2.0 ডেমো হিসাবে তালিকাভুক্ত করা হবে।

স্থানীয়ভাবে এই কোডটি চালানোর জন্য, আপনাকে YOUR_CLIENT_ID এবং YOUR_REDIRECT_URI ভেরিয়েবলের জন্য মান সেট করতে হবে যা আপনার অনুমোদনের শংসাপত্রের সাথে সঙ্গতিপূর্ণ। YOUR_REDIRECT_URI ভেরিয়েবলটি একই URL এ সেট করা উচিত যেখানে পৃষ্ঠাটি পরিবেশিত হচ্ছে৷ মানটি অবশ্যই OAuth 2.0 ক্লায়েন্টের জন্য অনুমোদিত রিডাইরেক্ট ইউআরআইগুলির একটির সাথে মিলতে হবে, যা আপনি API Console Credentials pageএ কনফিগার করেছেন। যদি এই মানটি একটি অনুমোদিত URI-এর সাথে মেলে না, তাহলে আপনি একটি redirect_uri_mismatch ত্রুটি পাবেন। আপনার প্রকল্পটি অবশ্যই এই অনুরোধের জন্য উপযুক্ত API সক্রিয় করতে হবে৷

<html><head></head><body>
<script>
  var YOUR_CLIENT_ID = 'REPLACE_THIS_VALUE';
  var YOUR_REDIRECT_URI = 'REPLACE_THIS_VALUE';
  var fragmentString = location.hash.substring(1);

  // Parse query string to see if page request is coming from OAuth 2.0 server.
  var params = {};
  var regex = /([^&=]+)=([^&]*)/g, m;
  while (m = regex.exec(fragmentString)) {
    params[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);
  }
  if (Object.keys(params).length > 0) {
    localStorage.setItem('oauth2-test-params', JSON.stringify(params) );
    if (params['state'] && params['state'] == 'try_sample_request') {
      trySampleRequest();
    }
  }

  // If there's an access token, try an API request.
  // Otherwise, start OAuth 2.0 flow.
  function trySampleRequest() {
    var params = JSON.parse(localStorage.getItem('oauth2-test-params'));
    if (params && params['access_token']) {
      var xhr = new XMLHttpRequest();
      xhr.open('GET',
          'https://www.googleapis.com/drive/v3/about?fields=user&' +
          'access_token=' + params['access_token']);
      xhr.onreadystatechange = function (e) {
        if (xhr.readyState === 4 && xhr.status === 200) {
          console.log(xhr.response);
        } else if (xhr.readyState === 4 && xhr.status === 401) {
          // Token invalid, so prompt for user permission.
          oauth2SignIn();
        }
      };
      xhr.send(null);
    } else {
      oauth2SignIn();
    }
  }

  /*
   * Create form to request access token from Google's OAuth 2.0 server.
   */
  function oauth2SignIn() {
    // Google's OAuth 2.0 endpoint for requesting an access token
    var oauth2Endpoint = 'https://accounts.google.com/o/oauth2/v2/auth';

    // Create element to open OAuth 2.0 endpoint in new window.
    var form = document.createElement('form');
    form.setAttribute('method', 'GET'); // Send as a GET request.
    form.setAttribute('action', oauth2Endpoint);

    // Parameters to pass to OAuth 2.0 endpoint.
    var params = {'client_id': YOUR_CLIENT_ID,
                  'redirect_uri': YOUR_REDIRECT_URI,
                  'scope': 'https://www.googleapis.com/auth/drive.metadata.readonly',
                  'state': 'try_sample_request',
                  'include_granted_scopes': 'true',
                  'response_type': 'token'};

    // Add form parameters as hidden input values.
    for (var p in params) {
      var input = document.createElement('input');
      input.setAttribute('type', 'hidden');
      input.setAttribute('name', p);
      input.setAttribute('value', params[p]);
      form.appendChild(input);
    }

    // Add form to page and submit it to open the OAuth 2.0 endpoint.
    document.body.appendChild(form);
    form.submit();
  }
</script>

<button onclick="trySampleRequest();">Try sample request</button>
</body></html>

জাভাস্ক্রিপ্ট মূল বৈধতা নিয়ম

ডেভেলপারদের তাদের অ্যাপ্লিকেশানগুলিকে সুরক্ষিত রাখতে সহায়তা করার জন্য Google JavaScript উত্সগুলিতে নিম্নলিখিত বৈধতা নিয়মগুলি প্রয়োগ করে৷ আপনার জাভাস্ক্রিপ্ট উত্স এই নিয়ম মেনে চলতে হবে. নীচে উল্লিখিত ডোমেন, হোস্ট এবং স্কিমের সংজ্ঞার জন্য RFC 3986 বিভাগ 3 দেখুন।

বৈধতা নিয়ম
পরিকল্পনা

JavaScript অরিজিন অবশ্যই HTTPS স্কিম ব্যবহার করবে, সাধারণ HTTP নয়। লোকালহোস্ট ইউআরআই (স্থানীয় হোস্ট আইপি ঠিকানা ইউআরআই সহ) এই নিয়ম থেকে অব্যাহতিপ্রাপ্ত।

হোস্ট

হোস্ট কাঁচা IP ঠিকানা হতে পারে না. স্থানীয় হোস্ট আইপি ঠিকানাগুলি এই নিয়ম থেকে অব্যাহতিপ্রাপ্ত।

ডোমেইন
  • হোস্ট টিএলডি ( টপ লেভেল ডোমেন ) অবশ্যই পাবলিক প্রত্যয় তালিকার অন্তর্গত।
  • হোস্ট ডোমেন “googleusercontent.com” হতে পারে না।
  • অ্যাপটি ডোমেনের মালিক না হলে JavaScript অরিজিনে URL শর্টনার ডোমেন (যেমন goo.gl ) থাকতে পারে না।
  • ব্যবহারকারীর তথ্য

    জাভাস্ক্রিপ্ট অরিজিনে ব্যবহারকারীর তথ্য উপকম্পোনেন্ট থাকতে পারে না।

    পথ

    জাভাস্ক্রিপ্টের উৎপত্তিতে পাথ উপাদান থাকতে পারে না।

    প্রশ্ন

    জাভাস্ক্রিপ্ট অরিজিন কোয়েরি উপাদান ধারণ করতে পারে না।

    টুকরা

    জাভাস্ক্রিপ্টের উৎপত্তিতে খণ্ডের উপাদান থাকতে পারে না।

    চরিত্র জাভাস্ক্রিপ্ট অরিজিনে কিছু অক্ষর থাকতে পারে না যার মধ্যে রয়েছে:
    • ওয়াইল্ডকার্ড অক্ষর ( '*' )
    • অ-মুদ্রণযোগ্য ASCII অক্ষর
    • অবৈধ শতাংশ এনকোডিং (যেকোন শতাংশ এনকোডিং যা একটি শতাংশ চিহ্নের URL-এনকোডিং ফর্ম অনুসরণ করে না এবং দুটি হেক্সাডেসিমেল সংখ্যা অনুসরণ করে)
    • শূন্য অক্ষর (একটি এনকোড করা NULL অক্ষর, যেমন, %00 , %C0%80 )

    ক্রমবর্ধমান অনুমোদন

    OAuth 2.0 প্রোটোকলে, আপনার অ্যাপ রিসোর্স অ্যাক্সেস করার জন্য অনুমোদনের অনুরোধ করে, যা স্কোপ দ্বারা চিহ্নিত করা হয়। আপনার প্রয়োজনের সময়ে সংস্থানগুলির জন্য অনুমোদনের জন্য অনুরোধ করা একটি সর্বোত্তম ব্যবহারকারী-অভিজ্ঞতার অনুশীলন হিসাবে বিবেচিত হয়। সেই অনুশীলন সক্ষম করতে, Google এর অনুমোদন সার্ভার ক্রমবর্ধমান অনুমোদন সমর্থন করে। এই বৈশিষ্ট্যটি আপনাকে প্রয়োজন অনুসারে স্কোপের অনুরোধ করতে দেয় এবং, ব্যবহারকারী যদি নতুন সুযোগের জন্য অনুমতি দেয় তবে একটি অনুমোদন কোড ফেরত দেয় যা ব্যবহারকারীর প্রকল্পটি মঞ্জুর করা সমস্ত সুযোগ সমন্বিত একটি টোকেনের জন্য বিনিময় করা যেতে পারে।

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

    এই ক্ষেত্রে, সাইন-ইন করার সময় অ্যাপটি openid এবং profile স্কোপগুলিকে প্রাথমিক সাইন-ইন করার জন্য অনুরোধ করতে পারে এবং তারপরে পরবর্তী সময়ে https://www.googleapis.com/auth/drive.file স্কোপের অনুরোধ করতে পারে একটি মিশ্রণ সংরক্ষণ করার প্রথম অনুরোধ.

    ক্রমবর্ধমান অনুমোদন থেকে প্রাপ্ত একটি অ্যাক্সেস টোকেনের ক্ষেত্রে নিম্নলিখিত নিয়মগুলি প্রযোজ্য:

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

    নীচের কোড নমুনাগুলি দেখায় যে কীভাবে একটি বিদ্যমান অ্যাক্সেস টোকেনে স্কোপ যুক্ত করতে হয়। এই পদ্ধতিটি আপনার অ্যাপকে একাধিক অ্যাক্সেস টোকেন পরিচালনা করা এড়াতে অনুমতি দেয়।

    জেএস ক্লায়েন্ট লাইব্রেরি

    বিদ্যমান অ্যাক্সেস টোকেনে স্কোপ যোগ করতে, GoogleUser.grant(options) পদ্ধতিতে কল করুন। options অবজেক্ট অতিরিক্ত স্কোপ চিহ্নিত করে যেখানে আপনি অ্যাক্সেস দিতে চান।

    // Space-separated list of additional scope(s) you are requesting access to.
    // This code adds read-only access to the user's calendars via the Calendar API.
    var NEW_SCOPES = 'https://www.googleapis.com/auth/calendar.readonly';
    
    // Retrieve the GoogleUser object for the current user.
    var GoogleUser = GoogleAuth.currentUser.get();
    GoogleUser.grant({'scope': NEW_SCOPES});

    OAuth 2.0 এন্ডপয়েন্ট

    একটি বিদ্যমান অ্যাক্সেস টোকেনে স্কোপ যোগ করতে, Google-এর OAuth 2.0 সার্ভারে আপনার অনুরোধে include_granted_scopes প্যারামিটার অন্তর্ভুক্ত করুন।

    নিম্নলিখিত কোড স্নিপেট প্রদর্শন করে কিভাবে এটি করতে হয়। স্নিপেট অনুমান করে যে আপনি সেই স্কোপগুলি সংরক্ষণ করেছেন যার জন্য আপনার অ্যাক্সেস টোকেন ব্রাউজারের স্থানীয় স্টোরেজে বৈধ। (The complete example code stores a list of scopes for which the access token is valid by setting the oauth2-test-params.scope property in the browser's local storage.)

    The snippet compares the scopes for which the access token is valid to the scope you want to use for a particular query. If the access token does not cover that scope, the OAuth 2.0 flow starts. Here, the oauth2SignIn function is the same as the one that was provided in step 2 (and that is provided later in the complete example ).

    var SCOPE = 'https://www.googleapis.com/auth/drive.metadata.readonly';
    var params = JSON.parse(localStorage.getItem('oauth2-test-params'));
    
    var current_scope_granted = false;
    if (params.hasOwnProperty('scope')) {
      var scopes = params['scope'].split(' ');
      for (var s = 0; s < scopes.length; s++) {
        if (SCOPE == scopes[s]) {
          current_scope_granted = true;
        }
      }
    }
    
    if (!current_scope_granted) {
      oauth2SignIn(); // This function is defined elsewhere in this document.
    } else {
      // Since you already have access, you can proceed with the API request.
    }

    Revoking a token

    In some cases a user may wish to revoke access given to an application. A user can revoke access by visiting Account Settings . See the Remove site or app access section of the Third-party sites & apps with access to your account support document for more information.

    It is also possible for an application to programmatically revoke the access given to it. Programmatic revocation is important in instances where a user unsubscribes, removes an application, or the API resources required by an app have significantly changed. In other words, part of the removal process can include an API request to ensure the permissions previously granted to the application are removed.

    JS Client Library

    To programmatically revoke a token, call GoogleAuth.disconnect() :

    GoogleAuth.disconnect();

    OAuth 2.0 Endpoints

    To programmatically revoke a token, your application makes a request to https://oauth2.googleapis.com/revoke and includes the token as a parameter:

    curl -d -X -POST --header "Content-type:application/x-www-form-urlencoded" \
            https://oauth2.googleapis.com/revoke?token={token}

    The token can be an access token or a refresh token. If the token is an access token and it has a corresponding refresh token, the refresh token will also be revoked.

    If the revocation is successfully processed, then the HTTP status code of the response is 200 . For error conditions, an HTTP status code 400 is returned along with an error code.

    The following JavaScript snippet shows how to revoke a token in JavaScript without using the Google APIs Client Library for JavaScript. Since the Google's OAuth 2.0 endpoint for revoking tokens does not support Cross-origin Resource Sharing (CORS), the code creates a form and submits the form to the endpoint rather than using the XMLHttpRequest() method to post the request.

    function revokeAccess(accessToken) {
      // Google's OAuth 2.0 endpoint for revoking access tokens.
      var revokeTokenEndpoint = 'https://oauth2.googleapis.com/revoke';
    
      // Create <form> element to use to POST data to the OAuth 2.0 endpoint.
      var form = document.createElement('form');
      form.setAttribute('method', 'post');
      form.setAttribute('action', revokeTokenEndpoint);
    
      // Add access token to the form so it is set as value of 'token' parameter.
      // This corresponds to the sample curl request, where the URL is:
      //      https://oauth2.googleapis.com/revoke?token={token}
      var tokenField = document.createElement('input');
      tokenField.setAttribute('type', 'hidden');
      tokenField.setAttribute('name', 'token');
      tokenField.setAttribute('value', accessToken);
      form.appendChild(tokenField);
    
      // Add form to page and submit it to actually revoke the token.
      document.body.appendChild(form);
      form.submit();
    }