douban-login/login.md

## 需求
使用playwright，typescript实现豆瓣自动登录功能。
登录完成后保存cookies，下次登录直接使用cookies自动登录。

## 信息
登录页面：https://accounts.douban.com/passport/login?source=main
登录账号：13357108011，要求可配置
cookies保存在~/cookies.json

## 登录页html
<div class="account-main account-body login-wrap login-start  ">
  <div class="account-body-tabs">
    <ul class="tab-start">
      <li class="account-tab-phone on">短信登录／注册</li>
      <li class="account-tab-account">密码登录</li>
    </ul>
    <ul class="tab-quick">
      <li class="account-tab-scan">二维码登录</li>
    </ul>
    <div class="account-tab-switch">
      <div class="account-tab-switch-icon">
        <a class="quick icon-switch "></a>
        <a class="start icon-switch "></a>
      </div>
      <div class="account-tab-switch-text">
        <span class="quick">扫码登录</span>
        <span class="start">短信登录／注册</span>
      </div>
    </div>
  </div>
  <div class="account-tabcon-start">
    <div class="account-form">
    <div class="account-form-tips">请仔细阅读 <a target="_blank" href="https://accounts.douban.com/passport/agreement?hide_accept=1">豆瓣使用协议、豆瓣个人信息保护政策</a></div>
  <div class="account-form-error"><span class="hide"></span></div>
  <div class="account-form-raw">
    <label class="account-form-label">手机号：</label>
    <div class="account-form-field account-form-field-phone ">
      <span class="icon clear-input"></span>
      <input type="phone" name="phone" maxlength="13" class="account-form-input" placeholder="手机号" tabindex="1">
        <div class="account-form-field-area-code">
          <div class="account-form-field-area-code-label js-choose-district">+86</div>
        </div>
    </div>
  </div>
  <div class="account-form-raw">
    <label class="account-form-label">验证码：</label>
    <div class="account-form-field account-form-codes">
      <input id="code" type="text" name="code" maxlength="6" class="account-form-input" placeholder="验证码" tabindex="2" autocomplete="off">
      <div class="account-form-field-code ">
        <a href="javascript:;" class="get-code">获取验证码</a>
      </div>
    </div>
  </div>
  <div class="account-form-field-submit ">
    <a class="btn btn-phone ">登录豆瓣</a>
  </div>
</div>
    <div class="account-form-ft">
      <p class="account-form-link "><a class="help-link" target="_blank" data-action="login_phone_nocode" href="https://help.douban.com/account?app=1#t1-q5">收不到验证码</a></p>
      <!-- 账号安全改进 2020-09-23 -->
      <!-- <p class="account-form-remember">
        <input name="remember" type="checkbox" id="account-form-remember" tabindex="4"><label for="account-form-remember">下次自动登录</label>
      </p> -->
    </div>
    <div class="captcha-error hide">登录出现问题，<a href="javascript:window.location.reload()" data-action="captch_error">反馈并刷新</a></div>
      <div class="account-form-3rd ">
        <div class="account-form-3rd-hd">第三方登录: </div>
        <div class="account-form-3rd-bd">
          <a href="https://www.douban.com/accounts/connect/wechat/?from=main&amp;redir=http%3A//www.douban.com" class="link-3rd-wx link-3rd-wx-on" target="_top" title="用微信登录">wechat</a>
            <a href="https://www.douban.com/accounts/connect/sina_weibo/?from=main&amp;redir=http%3A//www.douban.com&amp;fallback=" class="link-3rd-wb link-3rd-wb-on" target="_top" title="用微博登录">weibo</a>
        </div>
      </div>
  </div>
  <div class="account-tabcon-quick account-quick">
    <div class="account-qr-code ">
      <div class="account-qr-tips">
        你的账号存在安全隐患，为保证账号安全，请在常用设备上使用 <strong>豆瓣 App App 扫码登录</strong>
      </div>
      <div class="account-qr-scan">
        加载中...
      </div>
      <div class="account-qr-text ark_cls">
            打开 <a href="https://www.douban.com/mobile/">豆瓣 App</a><br>
          扫一扫登录
      </div>
      <div class="account-qr-fail hide">
        <span>登录失败</span>
        <a href="javascript:;" class="btn btn-refresh account-qr-refresh ">点击刷新</a>
      </div>
    </div>
    <div class="account-qr-success hide">
      <div class="account-qr-success-hd">扫描成功！</div>
      <div class="account-qr-success-bd">
        <div class="account-qr-success-bd-text">请在手机上确认登录</div>
        <div class="account-qr-success-bd-pic "></div>
        <div class="account-qr-success-bd-link ">
          <a href="javascript:;">返回二维码登录</a>
        </div>
      </div>
    </div>
    <div class="account-qr-link ">
      <a href="javascript:;" class="link-phone">短信验证登录</a>
    </div>
  </div>
</div>
### step1: "手机号"框输入手机号(账号)，账号可配置
### step2: 点击"获取验证码"后，弹出滑块验证浮窗。需要等待人工获取登录完成。
### step3: 获得验证码后，在“验证码”框输入"验证码"
### step4: 点击"登录豆瓣"

## 实现

### 项目初始化

```bash
npm install
npx playwright install chromium
```

### 运行登录脚本

```bash
DOUBAN_PHONE=13357108011 npm run login
```

如需自动尝试滑块验证，可额外开启：

```bash
DOUBAN_PHONE=13357108011 \
DOUBAN_AUTO_SLIDER=1 \
npm run login
```

可选环境变量：

- `DOUBAN_SLIDER_DISTANCE`：手动指定拖动距离（像素），若自动测算失败时使用；
- `DOUBAN_SLIDER_OFFSETS`：自定义距离微调列表（逗号分隔，默认根据是否自定义距离选择一组偏移进行多次尝试）；
- `DOUBAN_SLIDER_HANDLE_SELECTOR` / `DOUBAN_SLIDER_TRACK_SELECTOR`：覆盖默认滑块、轨道选择器；
- `DOUBAN_SLIDER_BG_SELECTOR` / `DOUBAN_SLIDER_PIECE_SELECTOR`：覆盖滑块背景图、拼图块选择器；
- `DOUBAN_SLIDER_TIMEOUT`：等待滑块出现的超时时间（毫秒，默认 20000）。

### 行为说明

- 首次运行会在 `~/cookies.json` 写入登录成功后的 Cookies；后续执行会优先复用该文件自动登录。
- 如果 cookies 过期或被服务端清理，脚本会自动回退到短信验证码登录流程，并更新 cookies。
- Playwright 以非无头模式运行，便于观察流程；开启自动滑块时脚本会尝试模拟拖动，失败则仍可手动完成。控制台会提示输入短信验证码。