Related
I'm doing a post request to an ASP.Net Web API to acquire a token. I am able to do this successfully with the dart HTTP package as follow:
Uri address = Uri.parse('https://myaddress:myport/token');
var response = await http.post(
address,
body: {
'username': 'MyUsername',
'password': 'MyPassword',
'grant_type': 'password'
},
).timeout(Duration(seconds: 20));
return response.body;
No problem with Postman either:
Now I want to do the same with the base dart:io class, as the testing server has a self signed certificate which I found the HTTP package has no bypass for (might be wrong), but for the life of me I cannot figure out where I am going wrong as when I debug the server the requests never get hit with the following code:
Uri address = Uri.parse('https://myaddress:myport/token');
HttpClient httpClient = HttpClient();
httpClient.connectionTimeout = Duration(seconds: 20);
httpClient.badCertificateCallback = ((X509Certificate cert, String host, int port) => true); // Allow self signed certificates
HttpClientRequest request = await httpClient.postUrl(address);
final Map<String, String> payLoad = {
'username': 'MyUsername',
'password': 'MyPassword',
'grant_type': 'password'
};
request.headers.contentType = new ContentType("application", "x-www-form-urlencoded", charset: "utf-8");
request.add(utf8.encode(json.encode(payLoad)));
// request.write(payLoad);
HttpClientResponse response = await request.close();
String responseBody = await response.transform(utf8.decoder).join();
httpClient.close();
responseBody is always:
"{"error":"unsupported_grant_type"}"
So I assume my encoding or structure is wrong, but with all possibilities I have tried, nothing works, any help would be appreciated.
i did the same but in my case i am requesting a soap web service, the bellow code do the job for me i hope it will for you
Future<XmlDocument> sendSoapRequest(String dataRequest) async {
final startTime = Stopwatch()..start();
_attemptsRequest = 0;
bool successful = false;
String dataResponse;
try {
Uri uri = Uri.parse('https://address:port/ADService');
var httpClient = HttpClient();
httpClient.connectionTimeout = Duration(milliseconds: 5000);
httpClient.idleTimeout = Duration(milliseconds: 5000);
httpClient.badCertificateCallback = ((X509Certificate cert, String host, int port) => true); // Allow self signed certificates
await httpClient
.openUrl('POST', uri)
.then((HttpClientRequest request) async {
request.headers.contentType =
new ContentType('application', 'text/xml', charset: 'UTF-8');
_attemptsRequest++;
request.write(dataRequest);
await request.close().then((HttpClientResponse response) async {
// var data = await response.transform(utf8.decoder).join();
// i didn't use this method cause it disorganize the response when there is high level of data, -i get binary data from the server-
var data = await utf8.decoder.bind(response).toList();
dataResponse = data.join();
successful = true;
httpClient.close();
});
_timeRequest = startTime.elapsed.inMilliseconds;
});
} catch (e) {
if (_attemptsRequest >= getAttempts) {
_timeRequest = startTime.elapsed.inMilliseconds;
if (e is SocketException)
throw Exception('Timeout exception, operation has expired: $e');
throw Exception('Error sending request: $e');
} else {
sleep(const Duration(milliseconds: 500));
}
}
try {
if (successful) {
XmlDocument doc;
doc = parse(dataResponse);
return doc;
} else {
return null;
}
} catch (e) {
throw Exception('Error converting response to Document: $e');
}
}
Here is my MultiPartRequest code
var request =
http.MultipartRequest("POST", Uri.parse(EMPLOYEE_PUNCH_IN_URL));
request.fields['uid'] = userId;
request.fields['location'] = location;
request.fields['punchin_time'] = punchInTime;
request.fields['punchin_location_name'] = address;
var multiPartFile = await http.MultipartFile.fromPath(
"photo", imageFile.path,
contentType: MediaType("image", "$extension"));
request.files.add(multiPartFile);
http.StreamedResponse response = await request.send();
var responseByteArray = await response.stream.toBytes();
employeePunchInModel = standardSerializers.deserializeWith(
EmployeePunchInModel.serializer,
json.decode(utf8.decode(responseByteArray)));
......
I know how to set timeout to a normal http request. I have followed this link
Set timeout for HTTPClient get() request
I have tried adding timeout function in following ways but it won't work and my request gets completed
1.
var multiPartFile = await http.MultipartFile.fromPath(
"photo", imageFile.path,
contentType: MediaType("image", "$extension")).timeout(const Duration(seconds: 1));
2.
http.StreamedResponse response = await request.send().timeout(const Duration(seconds: 1));
3.
var responseByteArray = await response.stream.toBytes().timeout(const Duration(seconds: 15));
But none of the above timeout works.
Using http package, this is my approach :
Create a Streamed Response that we're going to use for onTimeOut callback
StreamedResponse timeOutResponse({
#required String httpMethod,
#required dynamic error,
#required String url,
}) {
Map<String, dynamic> body = {
'any': 'value',
'you': 'want for $error',
};
int statusCode = 404;
Uri destination = Uri.parse(url);
String json = jsonEncode(body);
return StreamedResponse(
Stream.value(json.codeUnits),
statusCode,
request: Request(httpMethod, destination),
);
}
Use the modified http multipart function from Mahesh Jamdade answer
Future<http.Response> makeAnyHttpRequest(String url,
Map<String, dynamic> body,
{Function onTimeout,
Duration duration = const Duration(seconds: 10)}) async {
final request = http.MultipartRequest(
'POST',
Uri.parse('$url'),
);
final res = await request.send().timeout(
duration,
onTimeout: () {
return timeOutResponse(
httpMethod: 'MULTIPART POST',
error: 'Request Time Out',
url: url,
);
},
);
return await http.Response.fromStream(res);
}
this way, instead of timeout exception, you can return the onTimeOut Http Response.
Use Dio package with following code:
try {
final response = await Dio().post(requestFinal.item1, data:formData, options: option,
onSendProgress: (sent, total) {
print("uploadFile ${sent / total}");
});
print("Response Status code:: ${response.statusCode}");
if (response.statusCode >= 200 && response.statusCode < 299) {
dynamic jsonResponse = response.data;
print("response body :: $jsonResponse");
final message = jsonResponse["msg"] ?? '';
final status = jsonResponse["status"] ?? 400;
final data = jsonResponse["data"];
return HttpResponse(status: status, errMessage: message, json: data);
}
else {
dynamic jsonResponse = response.data;
print('*********************************************************');
print("response body :: $jsonResponse");
print('*********************************************************');
var errMessage = jsonResponse["msg"];
return HttpResponse(status: response.statusCode, errMessage: errMessage, json: jsonResponse);
}
}
on DioError catch(error) {
print('*********************************************************');
print('Error Details :: ${error.message}');
print('*********************************************************');
dynamic jsonResponse = error.response.data;
print('*********************************************************');
print("response body :: $jsonResponse");
print('*********************************************************');
var errMessage = jsonResponse["message"] ?? "Something went wrong";
return HttpResponse(status: jsonResponse["status"] , errMessage: errMessage, json: null);
}
Hope this helps!
I suggest that
var request = http.MultipartRequest("POST", Uri.parse(EMPLOYEE_PUNCH_IN_URL));
request.fields['uid'] = userId;
request.fields['location'] = location;
request.fields['punchin_time'] = punchInTime;
request.fields['punchin_location_name'] = address;
var multiPartFile = await http.MultipartFile.fromPath(
"photo", imageFile.path,
contentType: MediaType("image", "$extension"));
request.files.add(multiPartFile);
await request.send().timeout(Duration(seconds: 1), onTimeout: () {
throw "TimeOut";
}).then((onValue) {
var responseByteArray = await onValue.stream.toBytes();
employeePunchInModel = standardSerializers.deserializeWith(
EmployeePunchInModel.serializer,
json.decode(utf8.decode(responseByteArray)));
}).catchError((){ throw "TimeOut";});
hey you can also use dio 3.0.4
A powerful Http client for Dart, which supports Interceptors, Global configuration, FormData, Request Cancellation, File downloading, Timeout etc.
Here is the link :Http client for Dart
You can try this which uses http package
declare your multipart function like this with your desired arguments
Future<http.Response> makeAnyHttpRequest(String url,
Map<String, dynamic> body,
{Function onTimeout,
Duration duration = const Duration(seconds: 10)}) async {
final request = http.MultipartRequest(
'POST',
Uri.parse('$url'),
);
final res = await request.send().timeout(duration, onTimeout: onTimeout);
return await http.Response.fromStream(res);
}
and then call it within a try catch block and you can catch the timeout exception by throwing the desired value on Timeout.
try{
final res = makeAnyHttpRequest("<url>",{"body":"here"},onTimeout:(){
throw 'TIME_OUT'; // Throw anything
});
}catch(_){
if (_.toString() == 'TIME_OUT') { // catch the thrown value to detect TIMEOUT
/// DO SOMETHING ON TIMEOUT
debugPrint('The request Timeout');
}
}
}
The above approach would work for any http request as long as you have a onTimeout call back
I am trying to use Interceptor with Dio in flutter, I have to handle Token expire.
following is my code
Future<Dio> getApiClient() async {
token = await storage.read(key: USER_TOKEN);
_dio.interceptors.clear();
_dio.interceptors
.add(InterceptorsWrapper(onRequest: (RequestOptions options) {
// Do something before request is sent
options.headers["Authorization"] = "Bearer " + token;
return options;
},onResponse:(Response response) {
// Do something with response data
return response; // continue
}, onError: (DioError error) async {
// Do something with response error
if (error.response?.statusCode == 403) {
// update token and repeat
// Lock to block the incoming request until the token updated
_dio.interceptors.requestLock.lock();
_dio.interceptors.responseLock.lock();
RequestOptions options = error.response.request;
FirebaseUser user = await FirebaseAuth.instance.currentUser();
token = await user.getIdToken(refresh: true);
await writeAuthKey(token);
options.headers["Authorization"] = "Bearer " + token;
_dio.interceptors.requestLock.unlock();
_dio.interceptors.responseLock.unlock();
_dio.request(options.path, options: options);
} else {
return error;
}
}));
_dio.options.baseUrl = baseUrl;
return _dio;
}
problem is instead of repeating the network call with the new token, Dio is returning the error object to the calling method, which in turn is rendering the wrong widget, any leads on how to handle token refresh with dio?
I have found a simple solution that looks like the following:
this.api = Dio();
this.api.interceptors.add(InterceptorsWrapper(
onError: (error) async {
if (error.response?.statusCode == 403 ||
error.response?.statusCode == 401) {
await refreshToken();
return _retry(error.request);
}
return error.response;
}));
Basically what is going on is it checks to see if the error is a 401 or 403, which are common auth errors, and if so, it will refresh the token and retry the response. My implementation of refreshToken() looks like the following, but this may vary based on your api:
Future<void> refreshToken() async {
final refreshToken = await this._storage.read(key: 'refreshToken');
final response =
await this.api.post('/users/refresh', data: {'token': refreshToken});
if (response.statusCode == 200) {
this.accessToken = response.data['accessToken'];
}
}
I use Flutter Sercure Storage to store the accessToken. My retry method looks like the following:
Future<Response<dynamic>> _retry(RequestOptions requestOptions) async {
final options = new Options(
method: requestOptions.method,
headers: requestOptions.headers,
);
return this.api.request<dynamic>(requestOptions.path,
data: requestOptions.data,
queryParameters: requestOptions.queryParameters,
options: options);
}
If you want to easily allows add the access_token to the request I suggest adding the following function when you declare your dio router with the onError callback:
onRequest: (options) async {
options.headers['Authorization'] = 'Bearer: $accessToken';
return options;
},
I solved it using interceptors in following way :-
Future<Dio> getApiClient() async {
token = await storage.read(key: USER_TOKEN);
_dio.interceptors.clear();
_dio.interceptors
.add(InterceptorsWrapper(onRequest: (RequestOptions options) {
// Do something before request is sent
options.headers["Authorization"] = "Bearer " + token;
return options;
},onResponse:(Response response) {
// Do something with response data
return response; // continue
}, onError: (DioError error) async {
// Do something with response error
if (error.response?.statusCode == 403) {
_dio.interceptors.requestLock.lock();
_dio.interceptors.responseLock.lock();
RequestOptions options = error.response.request;
FirebaseUser user = await FirebaseAuth.instance.currentUser();
token = await user.getIdToken(refresh: true);
await writeAuthKey(token);
options.headers["Authorization"] = "Bearer " + token;
_dio.interceptors.requestLock.unlock();
_dio.interceptors.responseLock.unlock();
return _dio.request(options.path,options: options);
} else {
return error;
}
}));
_dio.options.baseUrl = baseUrl;
return _dio;
}
Dio 4.0.0 Support
dio.interceptors.add(
InterceptorsWrapper(
onRequest: (request, handler) {
if (token != null && token != '')
request.headers['Authorization'] = 'Bearer $token';
return handler.next(request);
},
onError: (e, handler) async {
if (e.response?.statusCode == 401) {
try {
await dio
.post(
"https://refresh.api",
data: jsonEncode(
{"refresh_token": refreshtoken}))
.then((value) async {
if (value?.statusCode == 201) {
//get new tokens ...
print("access token" + token);
print("refresh token" + refreshtoken);
//set bearer
e.requestOptions.headers["Authorization"] =
"Bearer " + token;
//create request with new access token
final opts = new Options(
method: e.requestOptions.method,
headers: e.requestOptions.headers);
final cloneReq = await dio.request(e.requestOptions.path,
options: opts,
data: e.requestOptions.data,
queryParameters: e.requestOptions.queryParameters);
return handler.resolve(cloneReq);
}
return e;
});
return dio;
} catch (e, st) {
}
}
},
),
);
I modify John Anderton's answer. I agree that it is better approach to check the token(s) before you actually make the request. we have to check if the tokens are expired or not, instead of making request and check the error 401 and 403.
I modify it to add some functionalities, so this interceptor can be used
to add access token to the header if it is still valid
to regenerate access token if it has expired
to navigate back to Login Page if refresh token has expired
to navigate back to Login Page if there is an error because of invalidated token (for example, revoked by the backend)
and it also work for multiple concurrent requests, and if you don't need to add token to the header (like in login endpoint), this interceptor can handle it as well. here is the interceptor
class AuthInterceptor extends Interceptor {
final Dio _dio;
final _localStorage = LocalStorage.instance; // helper class to access your local storage
AuthInterceptor(this._dio);
#override
void onRequest(RequestOptions options, RequestInterceptorHandler handler) async {
if (options.headers["requiresToken"] == false) {
// if the request doesn't need token, then just continue to the next interceptor
options.headers.remove("requiresToken"); //remove the auxiliary header
return handler.next(options);
}
// get tokens from local storage, you can use Hive or flutter_secure_storage
final accessToken = _localStorage.getAccessToken();
final refreshToken = _localStorage.getRefreshToken();
if (accessToken == null || refreshToken == null) {
_performLogout(_dio);
// create custom dio error
options.extra["tokenErrorType"] = TokenErrorType.tokenNotFound; // I use enum type, you can chage it to string
final error = DioError(requestOptions: options, type: DioErrorType.other);
return handler.reject(error);
}
// check if tokens have already expired or not
// I use jwt_decoder package
// Note: ensure your tokens has "exp" claim
final accessTokenHasExpired = JwtDecoder.isExpired(accessToken);
final refreshTokenHasExpired = JwtDecoder.isExpired(refreshToken);
var _refreshed = true;
if (refreshTokenHasExpired) {
_performLogout(_dio);
// create custom dio error
options.extra["tokenErrorType"] = TokenErrorType.refreshTokenHasExpired;
final error = DioError(requestOptions: options, type: DioErrorType.other);
return handler.reject(error);
} else if (accessTokenHasExpired) {
// regenerate access token
_dio.interceptors.requestLock.lock();
_refreshed = await _regenerateAccessToken();
_dio.interceptors.requestLock.unlock();
}
if (_refreshed) {
// add access token to the request header
options.headers["Authorization"] = "Bearer $accessToken";
return handler.next(options);
} else {
// create custom dio error
options.extra["tokenErrorType"] = TokenErrorType.failedToRegenerateAccessToken;
final error = DioError(requestOptions: options, type: DioErrorType.other);
return handler.reject(error);
}
}
#override
void onError(DioError err, ErrorInterceptorHandler handler) {
if (err.response?.statusCode == 403 || err.response?.statusCode == 401) {
// for some reasons the token can be invalidated before it is expired by the backend.
// then we should navigate the user back to login page
_performLogout(_dio);
// create custom dio error
err.type = DioErrorType.other;
err.requestOptions.extra["tokenErrorType"] = TokenErrorType.invalidAccessToken;
}
return handler.next(err);
}
void _performLogout(Dio dio) {
_dio.interceptors.requestLock.clear();
_dio.interceptors.requestLock.lock();
_localStorage.removeTokens(); // remove token from local storage
// back to login page without using context
// check this https://stackoverflow.com/a/53397266/9101876
navigatorKey.currentState?.pushReplacementNamed(LoginPage.routeName);
_dio.interceptors.requestLock.unlock();
}
/// return true if it is successfully regenerate the access token
Future<bool> _regenerateAccessToken() async {
try {
var dio = Dio(); // should create new dio instance because the request interceptor is being locked
// get refresh token from local storage
final refreshToken = _localStorage.getRefreshToken();
// make request to server to get the new access token from server using refresh token
final response = await dio.post(
"https://yourDomain.com/api/refresh",
options: Options(headers: {"Authorization": "Bearer $refreshToken"}),
);
if (response.statusCode == 200 || response.statusCode == 201) {
final newAccessToken = response.data["accessToken"]; // parse data based on your JSON structure
_localStorage.saveAccessToken(newAccessToken); // save to local storage
return true;
} else if (response.statusCode == 401 || response.statusCode == 403) {
// it means your refresh token no longer valid now, it may be revoked by the backend
_performLogout(_dio);
return false;
} else {
print(response.statusCode);
return false;
}
} on DioError {
return false;
} catch (e) {
return false;
}
}
}
usage
final dio = Dio();
dio.options.baseUrl = "https://yourDomain.com/api";
dio.interceptors.addAll([
AuthInterceptor(dio), // add this line before LogInterceptor
LogInterceptor(),
]);
if your request doesn't need token in the header (like in the login endpoint), then you should make request like this
await dio.post(
"/login",
data: loginData,
options: Options(headers: {"requiresToken": false}), // add this line
);
otherwise, just make a regular request without adding token to the header option, the interceptor will automatically handle it.
await dio.get("/user", data: myData);
I think that a better approach is to check the token(s) before you actually make the request. That way you have less network traffic and the response is faster.
EDIT: Another important reason to follow this approach is because it is a safer one, as X.Y. pointed out in the comment section
In my example I use:
http: ^0.13.3
dio: ^4.0.0
flutter_secure_storage: ^4.2.0
jwt_decode: ^0.3.1
flutter_easyloading: ^3.0.0
The idea is to first check the expiration of tokens (both access and refresh).
If the refresh token is expired then clear the storage and redirect to LoginPage.
If the access token is expired then (before submit the actual request) refresh it by using the refresh token, and then use the refreshed credentials to submit the original request. In that way you minimize the network traffic and you take the response way faster.
I did this:
AuthService appAuth = new AuthService();
class AuthService {
Future<void> logout() async {
token = '';
refresh = '';
await Future.delayed(Duration(milliseconds: 100));
Navigator.of(cnt).pushAndRemoveUntil(
MaterialPageRoute(builder: (context) => LoginPage()),
(_) => false,
);
}
Future<bool> login(String username, String password) async {
var headers = {'Accept': 'application/json'};
var request = http.MultipartRequest('POST', Uri.parse(baseURL + 'token/'));
request.fields.addAll({'username': username, 'password': password});
request.headers.addAll(headers);
http.StreamedResponse response = await request.send();
if (response.statusCode == 200) {
var resp = await response.stream.bytesToString();
final data = jsonDecode(resp);
token = data['access'];
refresh = data['refresh'];
secStore.secureWrite('token', token);
secStore.secureWrite('refresh', refresh);
return true;
} else {
return (false);
}
}
Future<bool> refreshToken() async {
var headers = {'Accept': 'application/json'};
var request =
http.MultipartRequest('POST', Uri.parse(baseURL + 'token/refresh/'));
request.fields.addAll({'refresh': refresh});
request.headers.addAll(headers);
http.StreamedResponse response = await request.send();
if (response.statusCode == 200) {
final data = jsonDecode(await response.stream.bytesToString());
token = data['access'];
refresh = data['refresh'];
secStore.secureWrite('token', token);
secStore.secureWrite('refresh', refresh);
return true;
} else {
print(response.reasonPhrase);
return false;
}
}
}
After that create the interceptor
import 'package:dio/dio.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import '../settings/globals.dart';
class AuthInterceptor extends Interceptor {
static bool isRetryCall = false;
#override
void onRequest(
RequestOptions options, RequestInterceptorHandler handler) async {
bool _token = isTokenExpired(token);
bool _refresh = isTokenExpired(refresh);
bool _refreshed = true;
if (_refresh) {
appAuth.logout();
EasyLoading.showInfo(
'Expired session');
DioError _err;
handler.reject(_err);
} else if (_token) {
_refreshed = await appAuth.refreshToken();
}
if (_refreshed) {
options.headers["Authorization"] = "Bearer " + token;
options.headers["Accept"] = "application/json";
handler.next(options);
}
}
#override
void onResponse(Response response, ResponseInterceptorHandler handler) async {
handler.next(response);
}
#override
void onError(DioError err, ErrorInterceptorHandler handler) async {
handler.next(err);
}
}
The secure storage functionality is from:
import 'package:flutter_secure_storage/flutter_secure_storage.dart';
SecureStorage secStore = new SecureStorage();
class SecureStorage {
final _storage = FlutterSecureStorage();
void addNewItem(String key, String value) async {
await _storage.write(
key: key,
value: value,
iOptions: _getIOSOptions(),
);
}
IOSOptions _getIOSOptions() => IOSOptions(
accountName: _getAccountName(),
);
String _getAccountName() => 'blah_blah_blah';
Future<String> secureRead(String key) async {
String value = await _storage.read(key: key);
return value;
}
Future<void> secureDelete(String key) async {
await _storage.delete(key: key);
}
Future<void> secureWrite(String key, String value) async {
await _storage.write(key: key, value: value);
}
}
check expiration with:
bool isTokenExpired(String _token) {
DateTime expiryDate = Jwt.getExpiryDate(_token);
bool isExpired = expiryDate.compareTo(DateTime.now()) < 0;
return isExpired;
}
and then the original request
var dio = Dio();
Future<Null> getTasks() async {
EasyLoading.show(status: 'Wait ...');
Response response = await dio
.get(baseURL + 'tasks/?task={"foo":"1","bar":"30"}');
if (response.statusCode == 200) {
print('success');
} else {
print(response?.statusCode);
}}
As you can see the Login and refreshToken request use http package (they don't need the interceptor). The getTasks use dio and it's interceptor in order to get its response in one and only request
Dio 4.0.0
dio.interceptors.clear();
dio.interceptors.add(
InterceptorsWrapper(
onRequest: (request, handler) {
if (token != null && token != '')
request.headers['Authorization'] = 'Bearer $token';
return handler.next(request);
},
onError: (err, handler) async {
if (err.response?.statusCode == 401) {
try {
await dio
.post(
"https://refresh.api",
data: jsonEncode(
{"refresh_token": refreshtoken}))
.then((value) async {
if (value?.statusCode == 201) {
//get new tokens ...
print("acces token" + token);
print("refresh token" + refreshtoken);
//set bearer
err.requestOptions.headers["Authorization"] =
"Bearer " + token;
//create request with new access token
final opts = new Options(
method: err.requestOptions.method,
headers: err.requestOptions.headers);
final cloneReq = await dio.request(err.requestOptions.path,
options: opts,
data: err.requestOptions.data,
queryParameters: err.requestOptions.queryParameters);
return handler.resolve(cloneReq);
}
return err;
});
return dio;
} catch (err, st) {
}
}
},
),
);
Dio 4.0.2 deprecates Interceptor locks. QueuedInterceptor should be used instead.
From the docs:
Locks of interceptors were originally designed to synchronize interceptor execution, but locks have a problem that once it becomes unlocked all of the requests run at once, rather than executing sequentially. Now QueuedInterceptor can do it better.
QueuedInterceptor provides a mechanism for sequential access（one by one） to interceptors.
An example of AuthInterceptor implemented using QueuedInterceptor:
/// Adds Authorization header with a non-expired bearer token.
///
/// Logic:
/// 1. Check if the endpoint requires authentication
/// - If not, bypass interceptor
/// 2. Get a non-expired access token
/// - AuthRepository takes care of refreshing the token if it is expired
/// 3. Make API call (attaching token in Authorization header)
/// 4. If response if 401 (e.g. a not expired access token that was revoked by backend),
/// force refresh access token and retry call.
///
/// For non-authenticated endpoints add the following header to bypass this interceptor:
/// `Authorization: None`
///
/// For endpoints with optional authentication provide the following header:
/// `Authorization: Optional`
/// - If user is not authenticated: the Authorization header will be removed
/// and the call will be performed without it.
/// - If the user is authenticated: the authentication token will be attached in the
/// Authorization header.
class AuthInterceptor extends QueuedInterceptor {
AuthInterceptor({
required this.dio,
required this.authRepository,
this.retries = 3,
});
/// The original dio
final Dio dio;
final AuthRepository authRepository;
/// The number of retries in case of 401
final int retries;
#override
Future<void> onRequest(
final RequestOptions options,
final RequestInterceptorHandler handler,
) async {
// Non-authenticated endpoint -> bypass this interceptor
if (options._requiresNoAuthentication()) {
options._removeAuthenticationHeader();
return handler.next(options);
}
// Get auth token
final authTokenRes = await authRepository.getAuthToken();
authTokenRes.fold(
success: (final authToken) {
// Add auth token in Authorization header
options._setAuthenticationHeader(authToken.token);
handler.next(options);
},
failure: (final e) async {
// Skip authentication header if it is optional and user is not authenticated
if (e is UserNoAuthenticatedException && options._hasOptionalAuthentication()) {
options._removeAuthenticationHeader();
return handler.next(options);
}
// Handle auth token errors
await _onErrorRefreshingToken();
final error = DioError(requestOptions: options, error: e);
handler.reject(error);
},
);
}
#override
Future<void> onError(final DioError err, final ErrorInterceptorHandler handler) async {
if (err.response?.statusCode != 401) {
return super.onError(err, handler);
}
// Check retry attempt
final attempt = err.requestOptions._retryAttempt + 1;
if (attempt > retries) {
return super.onError(err, handler);
}
err.requestOptions._retryAttempt = attempt;
await Future<void>.delayed(const Duration(seconds: 1));
// Force refresh auth token
final authTokenRes = await authRepository.getAuthToken(forceRefresh: true);
authTokenRes.fold(
success: (final authToken) async {
// Add new auth token in Authorization header and retry call
try {
final options = err.requestOptions.._setAuthenticationHeader(authToken.token);
final response = await dio.fetch<void>(options);
handler.resolve(response);
} on DioError catch (e) {
if (e.response?.statusCode == 401) {
await _onErrorRefreshingToken();
}
super.onError(e, handler);
}
},
failure: (final e) async {
// Handle auth token errors
await _onErrorRefreshingToken();
final error = DioError(requestOptions: err.requestOptions, error: authTokenRes.error);
return handler.next(error);
},
);
}
Future<void> _onErrorRefreshingToken() async {
await authRepository.signOut();
}
}
extension AuthRequestOptionsX on RequestOptions {
bool _requiresNoAuthentication() => headers['Authorization'] == 'None';
bool _hasOptionalAuthentication() => headers['Authorization'] == 'Optional';
void _setAuthenticationHeader(final String token) => headers['Authorization'] = 'Bearer $token';
void _removeAuthenticationHeader() => headers.remove('Authorization');
int get _retryAttempt => (extra['auth_retry_attempt'] as int?) ?? 0;
set _retryAttempt(final int attempt) => extra['auth_retry_attempt'] = attempt;
}
Notes:
In my case AuthRepository is a wrapper of FirebaseAuth. The Firebase SDK takes care of providing a non-expired token when getAuthToken() is called.
AuthRepository.getAuthToken() returns a Future<Result<AuthToken, AuthException>>. My Result object is similar to the one provided in Result package.
You would get a response status code as 401 for token expiration. In order to request new access token, you need to use post method along with form data and required Dio's options (content-type and headers). Below is the code shows how to request new token.
After successful request, if you get the response status code as 200, then you will get new access token value along with refresh token value and save them in any storage you prefer to use. For example, Shared preferences.
Once you have new access token saved, you can use it to fetch data using get method shown in the same code below.
onError(DioError error) async {
if (error.response?.statusCode == 401) {
Response response;
var authToken = base64
.encode(utf8.encode("username_value" + ":" + "password_value"));
FormData formData = new FormData.from(
{"grant_type": "refresh_token", "refresh_token": refresh_token_value});
response = await dio.post(
url,
data: formData,
options: new Options(
contentType: ContentType.parse("application/x-www-form-urlencoded"),
headers: {HttpHeaders.authorizationHeader: 'Basic $authToken'}),
);
if (response.statusCode == 200) {
response = await dio.get(
url,
options: new Options(headers: {
HttpHeaders.authorizationHeader: 'Bearer access_token_value'
}),
);
return response;
} else {
print(response.data);
return null;
}
}
return error;
}
Below is a snippet from my interceptor
dio.interceptors
.add(InterceptorsWrapper(onRequest: (RequestOptions options) async {
/* Write your request logic setting your Authorization header from prefs*/
String token = await prefs.accessToken;
if (token != null) {
options.headers["Authorization"] = "Bearer " + token;
return options; //continue
}, onResponse: (Response response) async {
// Write your response logic
return response; // continue
}, onError: (DioError dioError) async {
// Refresh Token
if (dioError.response?.statusCode == 401) {
Response response;
var data = <String, dynamic>{
"grant_type": "refresh_token",
"refresh_token": await prefs.refreshToken,
'email': await prefs.userEmail
};
response = await dio
.post("api/url/for/refresh/token", data: data);
if (response.statusCode == 200) {
var newRefreshToken = response.data["data"]["refresh_token"]; // get new refresh token from response
var newAccessToken = response.data["data"]["access_token"]; // get new access token from response
prefs.refreshToken = newRefreshToken;
prefs.accessToken = newAccessToken; // to be used in the request section of the interceptor
return dio.request(dioError.request.baseUrl + dioError.request.path,
options: dioError.request);
}
}
return dioError;
}));
return dio;
}
}
it is working 100%
RestClient client;
static BaseOptions options = new BaseOptions(
connectTimeout: 5000,
receiveTimeout: 3000,
);
RemoteService() {
// or new Dio with a BaseOptions instance.
final dio = Dio(options);
dio.interceptors
.add(InterceptorsWrapper(onRequest: (RequestOptions options) async {
// Do something before request is sent
return options; //continue
}, onResponse: (Response response) async {
// Do something with response data
return response; // continue
}, onError: (DioError error) async {
// Do something with response error
if (error.response.statusCode == 401) {
Response response =
await dio.post("http://addrees-server/oauth/token",
options: Options(
headers: {
'Authorization': ApiUtils.BASIC_TOKEN,
'Content-Type': ApiUtils.CONTENT_TYPE,
},
),
queryParameters: {
"grant_type": ApiUtils.GRANT_TYPE,
"username": AppConstants.LOGIN,
"password": AppConstants.PASSWORD
});
Sessions.access_token = response.data['access_token'];
error.response.request.queryParameters
.update('access_token', (value) => Sessions.access_token);
RequestOptions options = error.response.request;
return dio.request(options.path, options: options); //continue
} else {
return error;
}
}));
client = RestClient(dio);
}
How to use refresh_token to obtain a new access token from identity server in Xamarin.Forms client?
I followed tutorial https://sinclairinat0r.com/2018/12/09/secure-data-access-with-identityserver4-and-xamarin-forms and created xamarin forms mobile app with authentication on IS4. I set an access token lifetime to few minutes. After access token expires, as excepted, applciation is no more able to access authorized endpoints. I have an refresh_token but i dont't know how to use it to obtain a new access token from identity server.
Client specified in is4 configuration:
new Client()
{
ClientId = "xamarin-client",
ClientName = "Xamarin client",
AllowedGrantTypes = { "authorization_code" },
AllowedScopes = {"openid", "profile", "values-api" },
AllowAccessTokensViaBrowser = true,
AllowOfflineAccess = true,
AlwaysIncludeUserClaimsInIdToken = true,
RequirePkce = true,
RequireClientSecret = false,
RedirectUris = { "https://iglooidentityserver.azurewebsites.net/grants" },
AccessTokenLifetime = 180,
}
Authenticator i've used:
var oAuth = new OAuth2AuthenticatorEx(
"xamarin-client",
"offline_access values-api",
new Uri("https://iglooidentityserver.azurewebsites.net/connect/authorize"),
new Uri("https://iglooidentityserver.azurewebsites.net/grants"))
{
AccessTokenUrl = new Uri("https://iglooidentityserver.azurewebsites.net/connect/token"),
ShouldEncounterOnPageLoading = false,
};
var presenter = new OAuthLoginPresenter();
presenter.Completed += Presenter_Completed;
presenter.Login(oAuth);
I handled this problem in an old project as follows, hope this helps you.
public async Task<string> GetAccessToken()
{
if ((_authService.AuthAccessTokenExpireIn - DateTime.Now).TotalMinutes < 10) {
var authResponse = await GetRefreshTokenAsync(_authService.AuthRefreshToken);
_authService.AuthAccessToken = authResponse.AccessToken;
_authService.AuthRefreshToken = authResponse.RefreshToken;
_authService.AuthAccessTokenExpireIn = authResponse.ExpiresIn;
}
return _authService.AuthAccessToken;
}
public async Task<UserToken> GetRefreshTokenAsync(string currentRefreshToken)
{
string data = string.Format("grant_type=refresh_token&client_id={0}&client_secret={1}&refresh_token={2}", GlobalSetting.Instance.ClientId, GlobalSetting.Instance.ClientSecret, refreshToken);
var token = await PostAsync<UserToken>(_httpClient,
GlobalSetting.Instance.TokenEndpoint,
data);
return token;
}
public async Task<UserToken> PostAsync<UserToken>(HttpClient httpClient, string uri, object data)
{
var content = new StringContent(JsonConvert.SerializeObject(data));
content.Headers.ContentType = new MediaTypeHeaderValue("application/x-www-form-urlencoded");
HttpResponseMessage response = await httpClient.PostAsync(uri, content);
await HandleResponse(response);
string serialized = await response.Content.ReadAsStringAsync();
UserToken result = await Task.Run(() => JsonConvert.DeserializeObject<UserToken>(serialized, _serializerSettings));
return result;
}
I'm trying to implement following functionality:
User signs in into Live Id account from Windows Phone 8.1 (or Universal) app.
App accesses Web Api that I develop with ASP.NET Web Api 2
In this Web Api I need to authenticate the user.
Later, I want to authenticate same user in web app
Here is what I'm doing, and it doesn't work.
In my Windows Phone App:
var authClient = new LiveAuthClient("http://myservice.cloudapp.net");
LiveLoginResult result = await authClient.LoginAsync(new string[] { "wl.signin" });
if (result.Status == LiveConnectSessionStatus.Connected)
{
connected = true;
var identity = await ConnectToApi(result.Session.AuthenticationToken);
Debug.WriteLine(identity);
}
And then
private async Task<string> ConnectToApi(string token)
{
using (var client = new HttpClient())
{
client.BaseAddress = new Uri("http://myservice.cloudapp.net/");
client.DefaultRequestHeaders.Accept.Clear();
client.DefaultRequestHeaders.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));
client.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", token);
// HTTP GET
HttpResponseMessage response = await client.GetAsync("api/values");
if (response.IsSuccessStatusCode)
{
string result = await response.Content.ReadAsStringAsync();
return result;
}
else
return response.ReasonPhrase;
}
}
And then in my web api I have following
public void ConfigureAuth(IAppBuilder app)
{
app.UseMicrosoftAccountAuthentication(
clientId: "my client id",
clientSecret: "my secret");
}
I registered http://myservice.cloudapp.net as redirect url.
The problem is authentication doesn't work, web api actions do not recognize the user.
I got it totally wrong. First, I actually need to use app.UseJwtBearerAuthentication method. The example was found here http://code.lawrab.com/2014/01/securing-webapi-with-live-id.html. But when I tried, I got this error in the output
IDX10500: Signature validation failed. Unable to resolve SecurityKeyIdentifier: 'SecurityKeyIdentifier
(
IsReadOnly = False,
Count = 1,
Clause[0] = System.IdentityModel.Tokens.NamedKeySecurityKeyIdentifierClause
)
This one took me a while to figure out, until I found this post: JwtSecurityTokenHandler 4.0.0 Breaking Changes?
Putting these things together, I got the solution that seems to work now in my testing environment:
public void ConfigureAuth(IAppBuilder app)
{
var sha256 = new SHA256Managed();
var sKey = "<Secret key>" + "JWTSig";
var secretBytes = new UTF8Encoding(true, true).GetBytes(sKey);
var signingKey = sha256.ComputeHash(secretBytes);
var securityKeyProvider = new SymmetricKeyIssuerSecurityTokenProvider("urn:windows:liveid", signingKey);
var securityKey = securityKeyProvider.SecurityTokens.First().SecurityKeys.First();
var jwtOptions = new JwtBearerAuthenticationOptions()
{
//AllowedAudiences = new[] { "<url>" },
//IssuerSecurityTokenProviders = new[]
//{
// new SymmetricKeyIssuerSecurityTokenProvider("urn:windows:liveid",signingKey)
//},
TokenValidationParameters = new System.IdentityModel.Tokens.TokenValidationParameters()
{
IssuerSigningKeyResolver = (token, securityToken, keyIdentifier, validationParameters) =>
{
return securityKey;
},
ValidAudience = "<url>",
ValidIssuer = securityKeyProvider.Issuer
}
};
app.UseJwtBearerAuthentication(jwtOptions);
}
For anybody looking to do this from JavaScript I managed to get this working by following steps from this blog. You can find the audience by putting your token through jwt.io
https://blog.dirk-eisenberg.de/2014/08/30/validate-authentication_token-from-microsoft-liveid-with-node-express-jwt/
const validateLiveJWT = (token) => {
const secret = '<<SECRET>>';
const sha256 = crypto.createHash('sha256');
sha256.update(secret + 'JWTSig', 'utf8');
const secretBase64 = sha256.digest('base64');
const secret = new Buffer(secretBase64, 'base64');
const options = {
audience: '<<AUDIENCE>>',
issuer: 'urn:windows:liveid',
};
return new Promise((resolve) => {
jwt.verify(token, secret, options, (err: any, claims: any) => {
if (err) {
resolve(undefined);
} else {
resolve(claims);
}
});
});
}