ক্রেডেনশিয়াল ম্যানেজমেন্ট API-এর লেটেস্ট আপডেট

Eiji Kitamura

এখানে উল্লেখ করা কিছু আপডেট Google I/O সেশনে ব্যাখ্যা করা হয়েছে, নিরাপদ ও নির্বিঘ্ন সাইন-ইন: ব্যবহারকারীদের এনগেজ রাখা:

Chrome 57

Chrome 57-এ ক্রেডেনশিয়াল ম্যানেজমেন্ট API-তে এই গুরুত্বপূর্ণ পরিবর্তন করা হয়েছে।

অন্য সাবডোমেন থেকে ক্রেডেনশিয়াল শেয়ার করা যেতে পারে

Chrome এখন ক্রেডেনশিয়াল ম্যানেজমেন্ট API ব্যবহার করে অন্য সাবডোমেনে সেভ করা ক্রেডেনশিয়াল ফিরিয়ে আনতে পারে। যেমন, login.example.com-এ কোনও পাসওয়ার্ড স্টোর করা থাকলে, www.example.com-এর স্ক্রিপ্ট অ্যাকাউন্ট বেছে নেওয়ার ডায়ালগে অ্যাকাউন্ট আইটেম হিসেবে এটি দেখাতে পারে।

আপনাকে অবশ্যই navigator.credentials.store() ব্যবহার করে পাসওয়ার্ড স্টোর করতে হবে, যাতে ব্যবহারকারী ডায়ালগে ট্যাপ করে ক্রেডেনশিয়াল বেছে নিলে, পাসওয়ার্ড পাস হয়ে যায় এবং বর্তমান অরিজিনে কপি হয়ে যায়।

এটি স্টোর করা হয়ে গেলে, পাসওয়ার্ডটি ক্রেডেনশিয়াল হিসেবে একই অরিজিন www.example.com-এ উপলভ্য হবে।

নিচের স্ক্রিনশটে, login.aliexpress.com-এর অধীনে স্টোর করা ক্রেডেনশিয়াল সংক্রান্ত তথ্য m.aliexpress.com-এ দেখা যাচ্ছে এবং ব্যবহারকারী এখান থেকে বেছে নিতে পারবেন:

Chrome 60

Chrome 60-এ ক্রেডেনশিয়াল ম্যানেজমেন্ট API-তে বেশ কিছু গুরুত্বপূর্ণ পরিবর্তন করা হয়েছে:

• PasswordCredential অবজেক্টে এখন পাসওয়ার্ড অন্তর্ভুক্ত করা হয়েছে।

• পাসওয়ার্ড আনার জন্য কাস্টম fetch() ফাংশন আর প্রয়োজন নেই, এটি শীঘ্রই বন্ধ করে দেওয়া হবে।

• navigator.credentials.get() এখন বুলিয়ান ফ্ল্যাগ unmediated-এর পরিবর্তেmediation enum গ্রহণ করে।

• requireUserMediation()-এর নাম পরিবর্তন করে preventSilentAccess() করা হয়েছে।

• নতুন পদ্ধতি navigator.credentials.create() অ্যাসিঙ্ক্রোনাসভাবে ক্রেডেনশিয়াল অবজেক্ট তৈরি করে।

ফিচার শনাক্তকরণের দিকে বিশেষ নজর দিতে হবে

পাসওয়ার্ড-ভিত্তিক ও ফেডারেটেড ক্রেডেনশিয়াল অ্যাক্সেস করার জন্য ক্রেডেনশিয়াল ম্যানেজমেন্ট API উপলভ্য কিনা তা দেখতে, window.PasswordCredential বা window.FederatedCredential উপলভ্য কিনা তা চেক করুন।

if (window.PasswordCredential || window.FederatedCredential) {
  // The Credential Management API is available
}

PasswordCredential অবজেক্টে এখন পাসওয়ার্ড অন্তর্ভুক্ত আছে

Credential Management API পাসওয়ার্ড ম্যানেজ করার ক্ষেত্রে রক্ষণশীল পদ্ধতি অবলম্বন করে। এটি জাভাস্ক্রিপ্ট থেকে পাসওয়ার্ড লুকিয়ে রাখে, যার ফলে ডেভেলপারদের fetch() API-এর এক্সটেনশনের মাধ্যমে যাচাইকরণের জন্য সরাসরি তাদের সার্ভারে PasswordCredential অবজেক্ট পাঠাতে হয়।

কিন্তু এই পদ্ধতিতে বেশ কিছু বিধিনিষেধ আরোপ করা হয়। আমরা মতামত পেয়েছি যে ডেভেলপাররা API ব্যবহার করতে পারেননি কারণ:

• তাকে JSON অবজেক্টের অংশ হিসেবে পাসওয়ার্ড পাঠাতে হয়েছিল।

• তাদের সার্ভারে পাসওয়ার্ডের হ্যাশ ভ্যালু পাঠাতে হয়েছিল।

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

ক্রেডেনশিয়াল ম্যানেজমেন্ট API-তে এখন একটি র পাসওয়ার্ড অন্তর্ভুক্ত করা হয়েছে একটি রিটার্ন করা ক্রেডেনশিয়াল অবজেক্টে যাতে আপনি এটি প্লেন টেক্সট হিসেবে অ্যাক্সেস করতে পারেন। আপনার সার্ভারে ক্রেডেনশিয়াল সংক্রান্ত তথ্য পাঠাতে আপনি আগে থেকে থাকা পদ্ধতি ব্যবহার করতে পারবেন:

navigator.credentials.get({
    password: true,
    federated: {
    providers: [ 'https://accounts.google.com' ]
    },
    mediation: 'silent'
}).then(passwordCred => {
    if (passwordCred) {
    let form = new FormData();
    form.append('email', passwordCred.id);
    form.append('password', passwordCred.password);
    form.append('csrf_token', csrf_token);
    return fetch('/signin', {
        method: 'POST',
        credentials: 'include',
        body: form
    });
    } else {

    // Fallback to sign-in form
    }
}).then(res => {
    if (res.status === 200) {
    return res.json();
    } else {
    throw 'Auth failed';
    }
}).then(profile => {
    console.log('Auth succeeded', profile);
});

কাস্টম ফেচ শীঘ্রই বন্ধ করে দেওয়া হবে

আপনি কাস্টম fetch() ফাংশন ব্যবহার করছেন কিনা তা নির্ধারণ করতে, এটি PasswordCredential অবজেক্ট বা FederatedCredential অবজেক্ট ব্যবহার করে কিনা তা চেক করুন credentials প্রপার্টির মান হিসেবে, যেমন:

fetch('/signin', {
    method: 'POST',
    credentials: c
})

আগের কোডের উদাহরণে দেখানো সাধারণ fetch() ফাংশন ব্যবহার করা, অথবা XMLHttpRequest ব্যবহার করার সাজেশন দেওয়া হয়।

navigator.credentials.get() এখন enum মধ্যস্থতা গ্রহণ করে

Chrome 60 পর্যন্ত, navigator.credentials.get() বুলিয়ান ফ্ল্যাগ সহ একটি ঐচ্ছিক unmediated প্রপার্টি গ্রহণ করেছে। যেমন:

navigator.credentials.get({
    password: true,
    federated: {
    providers: [ 'https://accounts.google.com' ]
    },
    unmediated: true
}).then(c => {

    // Sign-in
});

unmediated: true সেটিং ক্রেডেনশিয়াল পাস করার সময় ব্রাউজারকে অ্যাকাউন্ট বাছাইকারী দেখানো থেকে আটকায়।

ফ্ল্যাগটি এখন মধ্যস্থতা হিসেবে বাড়ানো হয়েছে। ব্যবহারকারী মধ্যস্থতা তখনই হতে পারে যখন:

• ব্যবহারকারীকে সাইন-ইন করার জন্য একটি অ্যাকাউন্ট বেছে নিতে হবে।

• navigator.credentials.requireUseMediation() কল করার পরে ব্যবহারকারী স্পষ্টভাবে সাইন-ইন করতে চান।

mediation ভ্যালুর জন্য নিম্নলিখিত বিকল্পগুলির মধ্যে থেকে একটি বেছে নিন:

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

navigator.credentials.get({
    password: true,
    federated: {
    providers: [ 'https://accounts.google.com' ]
    },
    mediation: 'silent'
}).then(c => {

    // Sign-in
});

requireUserMediation()-এর নাম পরিবর্তন করে preventSilentAccess() করা হয়েছে

get() কলে অফার করা নতুন mediation প্রপার্টির সাথে সুন্দরভাবে অ্যালাইন করতে, navigator.credentials.requireUserMediation() পদ্ধতির নাম পরিবর্তন করে navigator.credentials.preventSilentAccess() করা হয়েছে।

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

signoutUser();
if (navigator.credentials) {
    navigator.credentials.preventSilentAccess();
}

নতুন পদ্ধতি navigator.credentials.create()-এর মাধ্যমে অ্যাসিঙ্ক্রোনাসভাবে ক্রেডেনশিয়াল অবজেক্ট তৈরি করুন

নতুন পদ্ধতি, navigator.credentials.create()-এর মাধ্যমে এখন আপনার কাছে অ্যাসিঙ্ক্রোনাসভাবে ক্রেডেনশিয়াল অবজেক্ট তৈরি করার বিকল্প আছে। সিঙ্ক ও অ্যাসিঙ্ক অ্যাপ্রোচের মধ্যে তুলনা করতে আরও পড়ুন।

PasswordCredential অবজেক্ট তৈরি করা হচ্ছে

সিঙ্ক করার পদ্ধতি

let c = new PasswordCredential(form);

অ্যাসিঙ্ক্রোনাস অ্যাপ্রোচ (নতুন)

let c = await navigator.credentials.create({
    password: form
});

অথবা:

let c = await navigator.credentials.create({
    password: {
    id: id,
    password: password
    }
});

FederatedCredential অবজেক্ট তৈরি করা হচ্ছে

সিঙ্ক করার পদ্ধতি

let c = new FederatedCredential({
    id:       'agektmr',
    name:     'Eiji Kitamura',
    provider: 'https://accounts.google.com',
    iconURL:  'https://*****'
});

অ্যাসিঙ্ক্রোনাস অ্যাপ্রোচ (নতুন)

let c = await navigator.credentials.create({
    federated: {
    id:       'agektmr',
    name:     'Eiji Kitamura',
    provider: 'https://accounts.google.com',
    iconURL:  'https://*****'
    }
});

মাইগ্রেশন গাইড

ক্রেডেনশিয়াল ম্যানেজমেন্ট API-এর আগে থেকে থাকা কোনও ইমপ্লিমেন্টেশন আছে? আমাদের কাছে মাইগ্রেশন গাইড ডকুমেন্ট আছে নতুন ভার্সনে আপগ্রেড করার জন্য আপনি এটি অনুসরণ করতে পারেন।