開発スタッフがアプリ関連の最新技術やニュースをご紹介します。

I talked about JWT last week and we get the basic idea of what is JWT, how it works etc. Today I will talk about the structure of JWT and its pros and cons.

If you haven’t read about JWT, you can read it here. So lets get started.

A JWT contains 3 parts separated by a “.” sign. These are header, payload and signature.

You can also take a look and can play debugging of these three parts at the official website of JWT called jwt.io

Header

Header contains the type of token and algorithm used for signing and encoding. Algorithms can be HMAC, SHA256, RSA, HS256 or RS256.

{ 
  "typ": "JWT",    
  "alg": "HS256"
}

Payload

Payload contains the data we are exchange through client and server. Here is the sample payload.

{
  "uid": "1234567890",
  "name": "yuuma",
  "iat": 1231313123
}

We can also add expiration payload to add expiration date of that token. We have to be careful about sensitive informations since, JWT can be decoded easily.

Signature

Signatures are the most important part of JWT. It is calculated by encoding the header and payload using the Base64url encoding and concatenating them with a dot sign. This is then passed to the encryption algorithm. If he header or payload changes, signature has to calculated again.

//sample from jwt.io
HMACSHA256(
  base64UrlEncode(header) + "." +
  base64UrlEncode(payload),
  your-256-bit-secret
) secret base64 encoded

Tips

We have to be careful about these facts if we are using JWT token in your authorization mechanism

• Use HTTPS to protect the Authorization header.
• Better to prepare with blocklist tokens as the attacker might get JWT token before it’s expiration date.
• If the JWT is cookie-persistent, you need to create an HttpOnlyCookie. This restricts third-party JavaScript from reading the JWT token from the cookie.
• For XSS, the server side should always sanitize user-generated data.
• For CSRF, have to mitigate CSRF by using the source of the request and special request headers.

Tweet

This week I would like to share about scrollbar widget and how to use it. Let’s go and start code!

By default scrollbar widget in flutter don’t show a scrollbar. But that’s fine in many cases but in others, you do want to display a scrollbar. Scrollbars show the users how far they’ve scrolled, and they allow things like jumping to a particular point in the list.

To show scrollbar use the widget called Scrollbar!

Make sure the scrollbar widget is finite. For example, it’s a ListView.builder, make sure itemCount is defined.

return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Scrollbar(
            child: ListView.builder(
              itemCount: 20,
              itemBuilder: (context, index) {
                return Card(
                  child : ListTile(
                    title: Text("Item: ${index + 1}"),
                  )
                );
              }
            )
          ),
        )
      )
    );

Hoped you enjoyed this article!

By Ami

Tweet

Microsoftが10月5日にWindowsの次期バージョンであるWindows11（以降Win11）が利用可能になるとアナウンスしました。

続きを読む

Tweet

You might be heard about JWT or even used it in your project for authorization. Today I will talk about JWT , what it’s and how it works.

JSON Web Token (JWT) is an open standard (RFC 7519) for securely transmitting information between parties as a JSON object.This information can be verified and trusted because it is digitally signed.

Where we can use JWT ?

JWT is a token-based authentication mechanism which is stateless. The server does not have store the information or data to hold session information.

Authorization:

This is the most common scenario for using JWT. Once the user is logged in, the next requests will be attached by JWT, allowing the user to access resources that are controlled with that token. Single Sign On is a feature that widely uses JWT nowadays, because of its small overhead and its ability to be easily used across different domains.

Information Exchange:

It’s also good for securely transmitting information between parties. Because JWTs can be signed—for example, using public/private key pairs—you can be sure the senders are who they say they are.

How it works

• User login with username and password or google / facebook.
• The authentication server verifies the credentials and issues a signed JWT using a secret salt or private key.
• The client uses the JWT to access protected resources by passing the JWT in the HTTP authorization header.
• The resource server then verifies the authenticity of the token using the public key / secret salt.

That is for now. I will talk about the JWT structure nextweek.

Yuuma

Tweet

Take a moment to think back to the last time you looked at the settings page. If you wish you would quickly and easily create a list of toggle switches like that, just use SwitchListTile.

Switch List Tile, you get a little tile that’s tappable anywhere to switch a toggle from off to on.

SwitchListTitles API looks a lot like widgets of similar names. ListTile, CheckboxListTile, RadioListTile, SwitchListTile all follow the same pattern.

ListTile(
 title: Text("List Tile"),
),
SwitchListTile(
 title: Text("Switch List Tile"),
/*.....*/
),

Start with the title : Text, which will appear in the middle of the tile. Then you can add Icons to either end, and with the control tiles like SwitchListTile.

ListTile(
 title: Text("List Tile"),
 leading: Icon(Icons.ac_unit),
 trailing: Fire(),
),
SwitchListTile(
 title: Text("Switch List Tile"),
 secondary: Icon(Icons.ac_unit),
 
),

Hope you enjoyed this article!

By Ami

Tweet